javascript - 怎么处理层移入之后图片消失的问题

Question

html

<p class="banner">
    <a href="" class='layer'></a>
    <p class='prev'></p>    
</p>

css

.banner{position: relative;width: 200px;height: 200px;border: 1px solid #000;margin: 0 auto;}
.layer{float: left;width: 100px;height: 180px;border: 1px solid #000;}
.prev{opacity:0;width: 62px;height: 62px;position: absolute;top: 50px;left: 0;background:  url(../images/leftarrow.jpg) 0 0 no-repeat;}

js

$('.layer').hover(function  () {
    $('.prev').animate({'opacity':'1'},40)
},function  () {
    $('.prev').animate({'opacity':'0'},40)
})

$('.prev').hover(function  () {
    $('.prev').css('opacity','1')
},function  () {
    $('.prev').animate({'opacity':'0'},40)
})

我想做到的效果是移入.layer层图片出现，从.layer移入图片.prev层图片不消失，现在为什么移入了.prev层图片会消失？该怎么写呢？

Answer 1

鼠标mouseover和mouseout的一个坑。你鼠标移动到图片的时候就会触发一次mouseout，所以图片就隐藏了。使用mouseenter和mousewheel来代替前面两个事件：

$('.layer').on('mouseenter', function(){
   $('.prev').animate({'opacity':'1'},40)
}).on('mousewheel', function(){
  $('.prev').animate({'opacity':'0'},40)
})