EventTarget事件 - mouseover

将mouseover指针设备移动到附加了侦听器的元素或其子节点之一上时会触发该事件。

基本信息

属性

示例

以下示例说明了mouseover和mouseenter事件之间的区别。

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  var test = document.getElementById("test");
  
  
  // this handler will be executed only once when the cursor moves over the unordered list
  test.addEventListener("mouseenter", function( event ) {   
    // highlight the mouseenter target
    event.target.style.color = "purple";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
  
  
  // this handler will be executed every time the cursor is moved over a different list item
  test.addEventListener("mouseover", function( event ) {   
    // highlight the mouseover target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

浏览器兼容性

我们将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端

注释：

[1]仅适用于<textarea>元素和某些<input>元素类型。

[2]在错误218093中实现。