Question

我是一名完全的业余爱好者，涉及计算机科学（可能在大学学习），但几天前决定建立一个网站发表科学文章，旨在培养学生对科学的兴趣。我的想法是，当您在我撰写的所有文章的目录页面上时，您可以将鼠标悬停在标题上以阅读其所描述内容的描述。虽然这个描述框的想法并不是绝对必要的，但令人沮丧的是因为我昨天只用一个盒子工作，但现在我已经添加了另一个并试图正确地命名它已经破坏的文字！我知道代码很粗糙，但是如果你能把任何贬低的评论放在一边就好了！

HTML

<p><a onmouseover="showbox('description')" onmouseout="hidebox('description')" 
href="Telomeres.html"> Title 1 </a></p>
<div id="description"><p>Description of title 1</p></div>


<p><a onmouseover="showbox('description2')" onmouseout="hidebox('description2')" 
href="index.html"> Title 2 </a></p>
<div id="description2"><p>Description of title 2</p></div>

的Javascript

    function showbox('description'){
document.getElementById('description').style.display = 'block';
}
function hidebox('description')
{
document.getElementById('description').style.display = 'none';
}




     function showbox('description2'){
document.getElementById('description2').style.display = 'block';
}
function hidebox('description2')
{
document.getElementById('description2').style.display = 'none';
}

Answer 1

您只需要一个功能来显示该框，因为您将id传递给它。函数括号中的东西是传入的参数的名称。在该函数内部，您可以使用该变量。所以在你的情况下，你会这样做：

function showbox(nodeId){
    document.getElementById(nodeId).style.display = 'block';
}

function hidebox(nodeId)
{
    document.getElementById(nodeId).style.display = 'none';
}

有关javascript函数的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Answer 2

看起来你的函数参数有引号是错误的，也没有必要为description1和description2

设置两个独立的块

你的代码应该是，

<强> HTML

<p><a onmouseover="showbox('description')" onmouseout="hidebox('description')" 
href="Telomeres.html"> Title 1 </a></p>
<div id="description"><p>Description of title 1</p></div>


<p><a onmouseover="showbox('description2')" onmouseout="hidebox('description2')" 
href="index.html"> Title 2 </a></p>
<div id="description2"><p>Description of title 2</p></div>

<强> JAVASCRIPT

function showbox(description){
   document.getElementById(description).style.display = 'block';
}

function hidebox(description)
{
    document.getElementById(description).style.display = 'none';
}

演示： https://jsfiddle.net/mvvtLt8h/

希望这有帮助！

Javascript：onmouseover函数用于网站上的描述框

2 个答案: