Question

我需要关于jquery悬停的帮助。

我已从codepen.io

创建了 demo

在此演示中，您可以看到图像。当您悬停图像时，将显示.blur div。如果将鼠标光标拖动到图像上，可以看到出现了问题。就像闪烁的灯光一样。

我该如何解决这个问题。有人可以帮我吗？

JS

$(document).ready(function() {
   $(".post").hover(
      function() {
         $(".blur").addClass('active');
      },
      function() {
         $(".blur").removeClass('active');
      }
   );
});

Answer 1

显示图片后，您不再悬停.post，而是将img转移到$(".post, .post img")。你可以像这样简单地改变它：

{{1}}

Answer 2

这是因为您的<div class="blur">位于<div class="post">容器之外，一旦您的鼠标悬停在它上面，它就会被视为mouseout状态，而.active类正在删除，因此眨眼。

尝试将其移至.post容器中：

<div class="post">
   <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
   <div class="blur"></div>
</div>

更新（根据您的评论）：

更好的方法是使用伪:after元素，如下所示：

.blurred:after {
   content: '';
   width:100%;
   height:100%;
   position: absolute;
   background-color:rgba(255,255,255,.7);
   background-size:cover;
   -webkit-filter: blur(8px);
   -moz-filter: blur(8px);
   -ms-filter: blur(8px);
   -o-filter: blur(8px);
   filter: blur(8px);
   top:0px;
   z-index:1;
}

在你的JS中：

$(".post").hover(
   function() { $(this).addClass('blurred'); },
   function() { $(this).removeClass('blurred'); }
);

和HTML：

<div class="post">
   <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
</div>

请参见修改后的demo

Answer 3

问题是当您将.post, .blur悬停在上方时，它会认为您不再悬停.post。解决方法是将.blur放入.post。

<div class="post">
   <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
   <div class="blur"></div>
</div>

有它，你的codepen与修改 http://codepen.io/sandrina-p/pen/mELxrW

Answer 4

试试这个，删除white light flickering，但仅限于mouseleave .blur class。

$(document).ready(function() {
   $(".container").on("mouseenter",function(){
         $(".blur").css("display","block");
     });
     $(".blur").on("mouseleave",function(){
         $(this).css("display","none");
     });
});

jquery悬停丢失了某些内容

4 个答案: