hover闪烁

[魔术世界中文版]

<style>
.pic-list li {
width: 186px;
height: 160px;
overflow: hidden;
padding-top: 10px;
float: left;
position: relative;
}
.pic-list li span {
width: 140px;
height: 88px;
padding: 5px;
display: block;
margin: 0 auto 10px auto;
background: url(http://cimg.178.com/wow/v4/pic-list-bg.jpg) no-repeat left top;
box-shadow: 0 0 10px #000000;
}
.pic-list li img {
width: 140px;
height: 88px;
}
.pic-list li strong {
display: block;
font-weight: normal;
padding: 0 20px;
}
.pic-list li em {
width: 94px;
height: 94px;
display: block;
background: url(http://cimg.178.com/wow/v4/video-icon.png) no-repeat left top;
position: absolute;
top: 15px;
left: 45px;
display: none;
}
</style>
<script src="http://www.51vv.com/zhuanti/js/jquery-1.8.3.min.js"></script>
<script>
	$(function(){
		$("ul li span").mouseenter(function(){
			$(this).next().next().show();
		});
		$("ul li span").mouseleave(function(){
			$(this).next().next().hide();
		});
	})
</script>
<ul class="pic-list">
			<li>
				<a href="http://wow.178.com/201409/204919576765.html">
					<span><img src="http://img3.178.com/wow/201409/204778348740/204919730627.jpg"></span>
					<strong>校长解说：国服6.0惊现双层豪华火箭坐骑</strong>
					<em></em>
				</a>
			</li>
</ul>

问题描述，鼠标移入图片后，中间播放器的光标不停的闪烁，求解决方法

[无·法]

<style>
.pic-list li {
width: 186px;
height: 160px;
overflow: hidden;
padding-top: 10px;
float: left;
position: relative;
}
.pic-list li span {
width: 140px;
height: 88px;
padding: 5px;
display: block;
margin: 0 auto 10px auto;
background: url(http://cimg.178.com/wow/v4/pic-list-bg.jpg) no-repeat left top;
box-shadow: 0 0 10px #000000;
}
.pic-list li img {
width: 140px;
height: 88px;
}
.pic-list li strong {
display: block;
font-weight: normal;
padding: 0 20px;
}
.pic-list li em {
width: 94px;
height: 94px;
background: url(http://cimg.178.com/wow/v4/video-icon.png) no-repeat left top;
position: absolute;
top: 15px;
left: 45px;

}
.hide1{display: none;}
</style>
<script src="http://www.51vv.com/zhuanti/js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
		$("ul li").hover(function(){
			$(this).find("em").removeClass("hide1");
		},function(){
			$(this).find("em").addClass("hide1");
		});
    })
</script>
<ul class="pic-list">
            <li>
                <a href="http://wow.178.com/201409/204919576765.html">
                    <span><img src="http://img3.178.com/wow/201409/204778348740/204919730627.jpg"></span>
                    <strong>校长解说：国服6.0惊现双层豪华火箭坐骑</strong>
                    <em class="hide1"></em>
                </a>
            </li>
</ul>

帮你改了下

[萧萧闪凌风]

<style>
.pic-list li {
width: 186px;
height: 160px;
overflow: hidden;
padding-top: 10px;
float: left;
position: relative;
}
.pic-list li span {
width: 140px;
height: 88px;
padding: 5px;
display: block;
margin: 0 auto 10px auto;
background: url(http://cimg.178.com/wow/v4/pic-list-bg.jpg) no-repeat left top;
box-shadow: 0 0 10px #000000;
}
.pic-list li img {
width: 140px;
height: 88px;
}
.pic-list li strong {
display: block;
font-weight: normal;
padding: 0 20px;
}
.pic-list li em {
width: 94px;
height: 94px;
display: block;
background: url(http://cimg.178.com/wow/v4/video-icon.png) no-repeat left top;
position: absolute;
top: 15px;
left: 45px;
display: none;
}
</style>
<script src="http://www.51vv.com/zhuanti/js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("ul li a").mouseenter(function(){
            $("ul li a em").show();
        });
        $("ul li a").mouseleave(function(){
             $("ul li a em").hide();
        });
    })
</script>
<ul class="pic-list">
            <li>
                <a href="http://wow.178.com/201409/204919576765.html">
                    <span><img src="http://img3.178.com/wow/201409/204778348740/204919730627.jpg"></span>
                    <strong>校长解说：国服6.0惊现双层豪华火箭坐骑</strong>
                    <em></em>
                </a>
            </li>
</ul>

移动到播放图标的时候就已经触发了mouseleave

[无·法]

再次修改了下尽量贴近你的方式，不过mouseenter我几乎没用过，都是用hover。 你的错误有这么几个： .pic-list li em里写了两次display。 鼠标移进触发的事件应该是em的父级菜单，而不是它的平级，所以用a和li都行 但是span就不行了。 因为鼠标移动到em上的时候就触发span的mouseleave事件了，这样em就消失，而消失的时候鼠标就在span上面了，这样又触发了span的mouseenter时间，这样造成了死循环，所以出现了闪烁效果。 另外我把show改成了fadeIn，效果要好点哦。

<style>
.pic-list li {
width: 186px;
height: 160px;
overflow: hidden;
padding-top: 10px;
float: left;
position: relative;
}
.pic-list li span {
width: 140px;
height: 88px;
padding: 5px;
display: block;
margin: 0 auto 10px auto;
background: url(http://cimg.178.com/wow/v4/pic-list-bg.jpg) no-repeat left top;
box-shadow: 0 0 10px #000000;
}
.pic-list li img {
width: 140px;
height: 88px;
}
.pic-list li strong {
display: block;
font-weight: normal;
padding: 0 20px;
}
.pic-list li em {
width: 94px;
height: 94px;
background: url(http://cimg.178.com/wow/v4/video-icon.png) no-repeat left top;
position: absolute;
top: 15px;
left: 45px;
display: none;
}

</style>
<script src="http://www.51vv.com/zhuanti/js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
		$("ul li a").mouseenter(function(){
			$(this).find("em").fadeIn();
		});
		$("ul li a").mouseleave(function(){
            $(this).find("em").hide();
        });
    })
</script>
<ul class="pic-list">
            <li>
                <a href="http://wow.178.com/201409/204919576765.html">
                    <span><img src="http://img3.178.com/wow/201409/204778348740/204919730627.jpg"></span>
                    <strong>校长解说：国服6.0惊现双层豪华火箭坐骑</strong>
                    <em></em>
                </a>
            </li>
</ul>

[a756375788]

$(function(){
        $("ul li").hover(function(){
            $(this).find("em").show();
        },function(){
            $(this).find("em").hide();
        });
    })

[漫舞云中影]

这样平滑些。

        $("ul li").hover(function () {
            $(this).find("em").fadeIn();
        }, function () {
            $(this).find("em").fadeOut();
        });

或者这样。

        $("ul li").hover(function () {
            $(this).find("em").show();
        }, function () {
            $(this).find("em").hide();
        });