Javascript:网站上描述框的onmouseover函数

Javascript: onmouseover function for description box on website

本文关键字：onmouseover 函数 描述 网站 Javascript      更新时间：2023-09-26

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

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';
}

您只需要一个函数来显示框，因为您将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

似乎函数参数的引号是错误的，而且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/

希望这能有所帮助！

相关文章：