jQuery: usage and definition of mouseenter event-JS Tutorial-php.cn

jQuery: usage and definition of mouseenter event

黄舟

Release： 2017-06-28 09:41:51

Original

1295 people have browsed it

jQuery Event - mouseenter() method

Definition and usage

When the mouse pointer passes through When passing an element, the mouseenter event occurs.

This event is most often used together with the mouseleave event.

The mouseenter() method triggers the mouseenter event, or specifies a function to run when the mouseenter event occurs.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){//鼠标移入颜色改变
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){//鼠标移出颜色还原
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
</html>

Copy after login

Note: Unlike the mouseover event, the mouseenter event will only be triggered when the mouse pointer passes through the selected element. If the mouse pointer passes through any child element, the mouseover event will also be triggered. See the example below for a demonstration.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
  $("p.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("p.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<p class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</p>
<p class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</p>
</body>
</html>

Copy after login

The above is the detailed content of jQuery: usage and definition of mouseenter event. For more information, please follow other related articles on the PHP Chinese website!