Question

我有两个div，一个带有内容，另一个用于将背景图像设置为悬停模糊。

它们都放在一个容器中，看起来应该是这样，但问题是当我将鼠标悬停在内容div上时，逻辑上（根据我编写的代码的结构），模糊规则设置为背景div不再有效。

我的问题是如何让它工作，以便当我将鼠标悬停在内容div上时，背景会变得模糊，或者是否可以通过纯HTML / CSS实现

＆＃13;

.col-lg-6 {height: 100%; margin: auto; padding: 0; border: none}
.container {height: 100%; ; background: #333333; }

.content {position: absolute; z-index: 10;}
.bg {height: 100%;; background-image: url(bg.jpg);
-webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;}
.bg:hover {-webkit-filter: blur(15px);}

＆＃13;

  
<a href="#">
    <div class="col-lg-6 col-sm-12">
        <div class="container">
            
            <div class="content">
                <img src="icon.png" class="img-responsive">
                <h2>Icon</h2>
            </div>
            
            <div class="bg">
            
            </div>
            
        </div>
    </div>
</a>

＆＃13;

Answer 1

您可以检查鼠标悬停事件，然后将一个类设置为元素，这样它将保持“模糊”效果。

您可以使用jQuery，如下所示：

$(document).ready(function () {
    $('.bg').on('mouseover', function() {
        $(this).addClass('bg-hovered');
    });
});

上课：

.bg-hovered {-webkit-filter: blur(15px);}

请参阅小提琴作品：https://jsfiddle.net/guschnwg/bg03hb6k/

Answer 2

您需要将:hover伪类更改为.container类。

而不是：

.bg:hover {
  -webkit-filter: blur(15px);
}

这样做：

.container:hover .bg {
  -webkit-filter: blur(15px);
}

这样，即使您将.content元素悬停，仍会应用模糊。

.container {
  height: 100%;
  background: #333333;
  position: relative;
}
.content {
  position: relative;
  z-index: 10;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://fillmurray.com/1000/500) no-repeat center center / cover;
  transition: all 0.5s ease;
}
.container:hover .bg {
  -webkit-filter: blur(15px);
}

<div class="container">
  <div class="content">
    <img src="http://placehold.it/50x50" class="img-responsive">
    <h2>Icon</h2>
  </div>
  <div class="bg"></div>
</div>

悬停时模糊的<div>在取消悬停后保持模糊

2 个答案: