如何在 link 悬停时使背景图像模糊？

Question

当您将鼠标光标悬停在 link 上时，我想让我的背景图像模糊，比方说 5px。有什么简单的方法可以做到这一点吗？我有点纠结于类而 id 在这里...

#pic {
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  /*blur using this function*/
  filter: blur(0);
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -o-filter: blur(0);
  -ms-filter: blur(0);
}

.banner_link {
  font-family: 'Raleway';
  letter-spacing: 0.2em;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
  padding-top: 45px;
  text-transform: uppercase;
}

.banner_link a:after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 90px;
  background: #ffffff;
  transition: width .2s ease, background-color .5s ease;
}

.banner_link a:hover:after {
  width: 0px;
  background: transparent;
}

.banner_link a:hover #pic {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

<div id="pic" class="banner">
  <div class="banner_link"><a>Link</a>
  </div>
</div>

Answer 1

#pic a:hover  {  
    background: url(<-- insert blurred image here -->);
}`

这是创建所需效果的最简单方法。我相信你知道，问题是范围之一。你不能（据我所知）在没有 JS 解决方法的情况下从子元素设置父元素的背景。

Answer 2

在jQuery

中实施

这是工作中的。当您悬停 link 时，它会使图像通过 jQuery 模糊。

请参阅下面的 jsfiddle link

http://jsfiddle.net/ahmukovf/

代码

$( ".banner_link" ).hover(function() {
  $('#pic').css("-webkit-filter", "blur(3px)", "filter", "blur(3px)");
});
$( ".banner_link" ).mouseout(function() {
  $('#pic').css("-webkit-filter", "blur(0px)", "filter", "blur(0px)");
});

在CSS

中实施

如果您想通过 CSS 实现它，请参阅这个有效的 jsfiddle。

http://jsfiddle.net/9jqax4jb/

代码

.banner_link a:hover + #pic {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

Answer 3

这个问题是因为您正试图通过 CSS 遍历 up 文档树。 CSS 中没有父选择器，因此当内部 <a> 元素悬停时，您只能依靠 JS 来切换模糊效果。

这可以使用原生 JS 轻松实现，但我选择使用 jQuery 因为相对易用。

技巧非常简单：绝对定位背景图像的模糊版本，嵌套在伪元素中，比如 ::before，其不透明度设置为零。当光标位于内部 <a> 元素上时，切换 class，比如 .blur，这会将伪元素的不透明度设置为 1。

之所以不能用JS设置伪元素的CSS属性是因为JS无法访问

$(function() {
  $('.banner_link a').hover(function() {
    $('#pic').addClass('blur');
  }, function() {
    $('#pic').removeClass('blur');
  });
});

#pic {
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  position: relative;
  overflow: hidden;
}
#pic::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
#pic.blur::before {
  opacity: 1;
}
.banner_link {
  font-family: 'Raleway';
  letter-spacing: 0.2em;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
  padding-top: 45px;
  position: relative;
  text-transform: uppercase;
}

.banner_link a::after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 90px;
  background: #ffffff;
  transition: width .2s ease, background-color .5s ease;
}

.banner_link a:hover:after {
  width: 0px;
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic" class="banner">
  <div class="banner_link"><a>Link</a>
  </div>
</div>

如何在 link 悬停时使背景图像模糊？

How to make background image blur on link hover?

html

css

blur