Javascript jquery悬停缺少某些内容

我需要关于jqueryhover的帮助

我从codepen.io创建了这个

在这个演示中，您可以看到图像。当您将鼠标悬停时，将显示图像

.blur

div。如果你在图像上拖动鼠标光标，你会发现有什么地方出错了，就像闪光灯一样

我怎样才能解决这个问题。有人能帮我吗

js

---

显示图像时，您不再将鼠标悬停在

.post

上，而是将鼠标悬停在

img

上。您可以这样简单地进行更改：

$(".post, .post img")

---

这是因为您的

位于

容器之外，一旦鼠标悬停，它将被视为

鼠标出状态，并且
.active
类将被删除，因此闪烁

尝试将其移动到
。post
容器中：

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

在您的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>



请参见修改后的
问题在于当您将鼠标悬停在
.post，
上时，
.blur
停留在上方，它认为您不再将鼠标悬停在
.post
上。修复方法是将
.blur
放入
.post
中

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



就是它，你的代码笔和修改
试试这个，它会移除闪烁的
白光，但只有当你的
鼠标离开
.blur类时

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

谢谢你的回答。但我想为post div添加缩放效果。如果我为img添加if，我该怎么办？你能给我举个例子吗？实际上，这个解决方案也可以解决这个问题。所以，请给我更多的信息，然后…嗨@haim770谢谢你的回答，但如果我在每一篇文章中使用模糊div，这意味着这么多模糊div将进入页面，这是不好的。我只想在身体上使用一个模糊div。此外，模糊div应全屏显示。
不在外部。如果更改模糊背景颜色：rgba（0,0,0,7）；你可以看到。谢谢你有兴趣回答我的问题。但你的解决方案并不是我的答案。blur div应该是全屏显示的。嗨@sandrina pereira谢谢你的回答，但是如果我在每篇文章中都使用blur div，这意味着会有很多blur div出现在页面上，这是不好的。我只想在身体上使用一个模糊div。另外，blur div应该是全屏显示的。所以这就像你想在每一篇文章中应用的效果，对吗？让我想想，给我5分钟。好的，我的解决方案是根本不在DOM上写“.blur”。而是使用.each（）函数通过jquery追加该类。代码笔帮助你：如果你需要进一步的解释，让我知道Blur div应该是全屏显示的。你这是什么意思？模糊会影响dom中的所有div和整个页面，对吗？
<div class="post">
   <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
   <div class="blur"></div>
</div>

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