如何使背景图像在链接悬停上模糊？
如何使背景图像在链接悬停上模糊？
提问于 2015-04-17 19:10:33
我想让我的背景图像模糊不清，比方说，当你用鼠标光标在链接上悬停时，我们可以说是5 5px。有什么简单的方法来实现这一点吗？我有点纠结于课程和身份证在这里..。
#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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-04-17 19:27:52
此问题是，您正试图使用CSS遍历文档树。CSS中没有父选择器，因此当内部<a>元素悬停时，只能依靠JS来切换模糊效果。
使用本机JS可以很容易地实现这一点，但由于相对容易使用，所以我选择使用jQuery。
诀窍很简单:绝对定位一个模糊版本的背景图像，嵌套在一个伪元素中，比如::before，它的不透明度设置为零。当光标位于内部<a>元素上时，切换一个类，比如.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>
Stack Overflow用户
发布于 2015-04-17 19:25:33
#pic a:hover {
background: url(<-- insert blurred image here -->);
}` 这是创建效果的最简单的方法，你正在寻找。我相信你知道，问题的范围之一。在没有JS解决方案的情况下，您不能(据我所知)从子元素中设置父元素的背景。
Stack Overflow用户
发布于 2015-04-17 19:27:44
在jQuery中的实现
这是在工作的那个。当你悬停链接，它将使图像模糊通过jQuery。
参见下面的jsfiddle链接
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来实现它，请看这个工作杂耍。
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29707562
复制相关文章
相似问题
腾讯云开发者
