Mouseover- und Mouseout-EreignisseEreignisse werden auf unseren Seiten häufig verwendet, um der Seite bessere Rendering-Effekte hinzuzufügen. Wenn das Element, das das Mouseover-Ereignis auslöst, jedoch untergeordnete Elemente hat, wird dies dazu führen Ein Flackereffekt, der sehr unangenehm anzusehen ist. Dies liegt daran, dass Mouseover und Mouseout unabhängig davon ausgelöst werden, ob der Mauszeiger über das ausgewählte Element oder seine Unterelemente verläuft. Die Ereignisse „Mouseenter“ und „Mouseleave“ werden nur ausgelöst, wenn der Mauszeiger über das ausgewählte Element verläuft.
<ul class="con-ul">
<li>
<div class="con-one">
<div class="con-oneimg">
<img src="http://image123465.cn">
<div class="dask" style="display: block; opacity: 0;"></div>
<div class="input" style="display: block; opacity: 0;">
<input type="button" class="inp inp-one" value="预览">
<input type="button" class="inp inp-two" value="使用">
</div>
</div>
<hr style="border-top:1px solid #b5b5b5;">
<p>study</p>
</div>
</li>
</ul>//1
$(".con-ul").on({
mouseenter: function() {
$(this).find(".dask").stop(true,true).fadeIn(600);
$(this).find(".input").stop(true,true).fadeIn(600);
},
mouseleave: function() {
$(this).find(".dask").stop(true,true).fadeOut(300);
$(this).find(".input").stop(true,true).fadeOut(300);
}
}, ".con-oneimg");
//2
$(".con-ul").on({
mouseover: function() {
$(this).find(".dask").stop(true,true).fadeIn(600);
$(this).find(".input").stop(true,true).fadeIn(600);
},
mouseout: function() {
$(this).find(".dask").stop(true,true).fadeOut(300);
$(this).find(".input").stop(true,true).fadeOut(300);
}
}, ".con-oneimg");
Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Mouseover und MouseEnter bei jQuery-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
