Maison > Article > interface Web > jQuery : utilisation et définition de l'événement mouseenter

jQuery : utilisation et définition de l'événement mouseenter

黄舟original: 2017-06-28 09:41:511296parcourir

jQuery Événement - méthode mouseenter()

Définition et utilisation

Lorsque le pointeur de la souris passe à travers Lors du passage d'un élément, l'événement mouseenter se produit.

Cet événement est le plus souvent utilisé avec l'événement mouseleave.

La méthode mouseenter() déclenche l'événement mouseenter ou spécifie une fonction à exécuter lorsque l'événement mouseenter se produit.

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

Remarque : contrairement à l'événement mouseover, l'événement mouseenter ne sera déclenché que lorsque le pointeur de la souris passe à travers l'élément sélectionné. Si le pointeur de la souris passe par un élément enfant, l'événement mouseover sera également déclenché. Voir l'exemple ci-dessous pour une démonstration.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résoudre le problème de la modification jquery mousedown invalide du style tdArticle suivant：Résoudre le problème de la modification jquery mousedown invalide du style td

Articles Liés

Voir plus