Question

我创建了两个div

.video .image,  .video .hover {
    width: 315px;
    height: 125px;
    position: absolute;
    top: 0; }

.video .hover {
    z-index:10;
    display:none; }

  <div class="left">
   <div class="image">
       <a href="..."><img src="..." height="125" width="315" /></a>
   </div>
    <div class="hover">
       <a href="..."><img src="..." height="125" width="315" alt="Left"></a>
   </div> 
  </div>

所以一个div变得低于另一个。

然后我添加了jQuery函数：

<script>

jQuery(".image").mouseenter(function(){
jQuery(this).parent().find(".hover").fadeIn(100);
  jQuery(".hover").mouseleave(function(){
  jQuery(this).parent().find(".hover").fadeOut(100);});   
});

</script>

看起来：当我将鼠标悬停在.image上时，.hover会高于.image，然后当鼠标离开.hover时，它会淡出。

但是！如果鼠标离开此区域的速度更快，那么.hover变得可见（在我的示例中，快于100毫秒），mouseleave不使用 - 因为没有.hover，所以.hover停留在{{1} }}。我该如何解决？

感谢您的回答！

Answer 1

使用CSS过渡最容易实现。

http://jsfiddle.net/eS3NS/

.video .hover {
    z-index:10;
    opacity: 0;
    transition: opacity .1s;
}

.video:hover .hover {
    opacity: 1;
}

Javascript，悬停和两个div

1 个答案: