cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery：mouseenter事件的使用和定义

jQuery：mouseenter事件的使用和定义

黄舟
黄舟asal
2017-06-28 09:41:511348semak imbas

jQuery 事件 - mouseenter() 方法

定义和用法

当鼠标指针穿过元素时，会发生 mouseenter 事件。

该事件大多数时候会与mouseleave 事件一起使用。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

<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>

注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。

<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>

Atas ialah kandungan terperinci jQuery：mouseenter事件的使用和定义. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery mousedown修改td的样式无效的问题解决Artikel seterusnya：jquery中的mouseenter的深入理解

Artikel berkaitan

Lihat lagi