Javascript: 网站描述框的鼠标悬停功能

Question

在计算机科学方面，我是一个完全的业余爱好者（可能考虑在大学学习），但几天前决定建立一个网站来发布 post 科学文章，旨在帮助学生发展他们的知识对科学的兴趣。这个想法是，当你在我写的所有文章的目录页面上时，你可以将鼠标悬停在标题上以阅读关于它的内容的描述。虽然这个描述框的想法不是绝对必要的，但它令人沮丧，因为我昨天只用一个盒子工作，但现在我添加了另一个并试图正确命名它损坏的文字！我知道代码很粗糙，但如果你能抛开任何贬低的评论，那就太好了！

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: 网站描述框的鼠标悬停功能

Javascript: onmouseover function for description box on website

javascript

html

web

onmouseover

onmouseout