鼠标悬停事件可以用在任何元素上，还是只能用在图像上?

Can the mouseover event be used on any element, or only on images?

本文关键字：图像 元素 事件 悬停 任何 鼠标      更新时间：2023-09-26
<html >
 <head>   
  <title>JavaScript Example</title>
    <script type="text/javascript">
      function greet { 
        var greet = document.getElementById("greeting");
        greet.value="this is dynamic";
    </script>
 </head>
 <body>
   <p onmouseover="greet()"> Hello! Welcome to My Page </p> 
</html>

这段代码的问题是什么?

首先，您没有关闭greet函数(缺少关闭}字符)。其次，你忽略了函数名后面的圆括号:

function greet() {
    //Function body
}

其次，您正在使用getElementById来尝试获取对p元素的引用，但p元素没有id。

第三，greet变量将包含对p元素的引用，该元素没有value属性(例如，input元素有)。如果您试图更改元素的内容，您可能指的是innerHTML。

最后，您还没有关闭<body>元素。编辑(见注释) -这不是问题，但我个人更倾向于关闭它以保持一致性。

你可以在函数被调用时传递一个对元素的引用，以节省你必须通过id:

获取它
<p onmouseover="greet(this);">Example</p>

和JavaScript: 

function greet(elem) {
    elem.innerHTML = "Something new";
}

p元素应该有一个ID为greet，如:

<p onmouseover="greet()" id="greeting"> Hello! Welcome to My Page </p>

，这样当你选择元素的ID时:

document.getElementById("greeting");

文档可以找到您试图从HTML文档中选择的标记。

此外，而不是编辑节点的"值"属性，我认为你需要使用"innerHTML"代替。这样就得到了:

<html >
 <head>   
  <title>JavaScript Example</title>
    <script type="text/javascript">
      function greet { 
        var greet = document.getElementById("greeting");
        greet.innerHTML="this is dynamic";
        }
    </script>
 </head>
 </body>
   <p onmouseover="greet()" id="greeting"> Hello! Welcome to My Page </p> 
</html>

我不太熟悉JavaScript，但我相信它应该可以工作。

您可以尝试:

greet = function(elem) {
             elem.innerHTML = "Something new";
        }

或

greet = function() {
            var greet = document.getElementById("greeting");
            greet.innerHTML="this is dynamic";
        }

当然还有其他的技巧(比如为相关的<p>元素添加id属性和良好的HTML格式)

相关文章：