jQuery mouseover和mouseout不断闪烁 [英] Jquery mouseover and mouseout keeps flashing
本文介绍了jQuery mouseover和mouseout不断闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在使用jQuery MouseOut和MouseOver时遇到一些问题.
每次我将鼠标悬停在选定的div上时,都会显示需要显示的子div.但是,它开始闪烁.
我不知道为什么.我已经在JsFiddle上发布了代码.
这是HTML代码:
<div class="section-item-portal">
<div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>
</div>
这是jQuery:
$(document).ready(function () {
$('.section-text').hide();
$('.section-item-portal').mouseover(function () {
$(this).children('.section-text').fadeIn();
});
$('.section-item-portal').mouseout(function () {
$(this).children('.section-text').fadeOut();
});
});
非常感谢您的帮助:)
解决方案
演示 >
改为使用mouseenter
和mouseleave
.
$(document).ready(function () {
$('.section-text').hide();
$('.section-item-portal').mouseenter(function () {
$(this).children('.section-text').fadeIn();
});
$('.section-item-portal').mouseleave(function () {
$(this).children('.section-text').fadeOut();
});
});
I am having some issues with jQuery MouseOut and MouseOver.
Every time I hover over the selected div, the child div that needs to show appears. however, it starts flashing.
I have no idea why. I have posted the code up on JsFiddle.
Here is the HTML code:
<div class="section-item-portal">
<div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>
</div>
Here is the jQuery:
$(document).ready(function () {
$('.section-text').hide();
$('.section-item-portal').mouseover(function () {
$(this).children('.section-text').fadeIn();
});
$('.section-item-portal').mouseout(function () {
$(this).children('.section-text').fadeOut();
});
});
I would appreciate all your help :)
解决方案
Use mouseenter
and mouseleave
instead.
$(document).ready(function () {
$('.section-text').hide();
$('.section-item-portal').mouseenter(function () {
$(this).children('.section-text').fadeIn();
});
$('.section-item-portal').mouseleave(function () {
$(this).children('.section-text').fadeOut();
});
});
这篇关于jQuery mouseover和mouseout不断闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文