Maison > Article > interface Web > Lorsque la souris jquery quitte la souris, une transaction sera traitée. Comment exclure la souris d'être affectée lorsqu'elle se trouve dans des éléments enfants ?
Lorsque la souris jquery quitte la souris, une transaction sera traitée. Comment exclure la souris d'être affectée lorsqu'elle se trouve dans des éléments enfants ?
- 黄舟original
- 2017-06-28 11:25:441298parcourir
Lorsque la souris jquery quitte (mouseout), une transaction sera traitée, mais comment exclure la souris lorsqu'elle est sur l'élément enfant sans affecter le
<div class="a"><div class="a1" style="display:none;"></div></div>
jquery中有mouseout离开时
$(".a").hover(function(){
$(this).find(".a1").css("display","block");
});
$(".a").mouseout(function(){
$(this).find(".a1").css("display","none");
});ci-dessus. son élément enfant, cela équivaut à quitter le DIV actuel, comment l'éviter ?
Vous pouvez utiliser la méthode jQuery event - mouseleave() pour obtenir cet effet.
Définition et utilisation
Lorsque le pointeur de la souris quitte un élément, l'événement mouseleave se produit.
Cet événement est le plus souvent utilisé avec l'événement mouseenter.
La méthode mouseleave() déclenche l'événement mouseleave ou spécifie une fonction à exécuter lorsque l'événement mouseleave se produit.
Remarque : Contrairement à l'événement mouseout, l'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quittera l'élément sélectionné. Si le pointeur de la souris quitte un élément enfant, l'événement mouseout sera également déclenché. Voir l'exemple ci-dessous pour une démonstration.
Grammaire
$(selector).mouseleave()
Exemple
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
</html>Est-il nécessaire de faire cela lorsqu'il n'y a qu'une seule fonction à l'étage ? Changez le code comme suit
$(".a").hover(
function(){
$(this).find(".a1").css("display","block");
},
function(){
$(this).find(".a1").css("display","none");
}
);ou
$(".a").mouseover(function(){
$(this).find(".a1").css("display","block");
});
$(".a").mouseleave(function(){
$(this).find(".a1").css("display","none");
});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!