我的代码一切正常,除了当我将鼠标悬停在我的链接上时,动画停止了。我不知道如何解决这个问题,以便当我将鼠标悬停在链接上时,背景应该模糊并按照我已经写的那样做动画。
HTML:
<div class="class">
<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
<a href="#">
<div class="text">
<h3>goalkeepers</h3>
</div>
</a>
</div>
CSS:
.class{
width:50%;
height:21vw;
float:left;
overflow: hidden;
position: relative;
transition: ease-in-out 0.55s;
}
.class img{
width:100%;
height:120%;
margin-top:-3.5vw;
transition: ease-in-out 0.55s;
}
.class img:hover{
-webkit-filter: blur(10px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform:scale(1.05);
}
.text h3{
margin-top:0;
margin-left:0;
text-align: center;
font-variant: small-caps;
font-weight: 100;
font-size: 2.9vw;
font-family: montserratlight;
}
.text {
width: auto;
height: auto;
margin: 0;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
padding-bottom: 0.1vw;
display: inline-block;
}
.text:after {
content: "";
display: block;
margin: auto;
height: 0.15vw;
width: 0px;
background: transparent;
transition: width 0.55s ease, background-color 0.55s ease;
}
.class:hover > a .text:after {
width: 100%;
background: white;
}
最佳答案
通过这个链接,它有你问题的详细答案!! 我遇到了同样的问题,它对我帮助很大!
https://stackoverflow.com/a/29707839/6422740
此问题是您试图使用 CSS 向上遍历文档树。 CSS 中没有父选择器,因此只能依靠 JS 来切换内部元素悬停时的模糊效果。
这可以使用原生 JS 轻松实现,但我选择使用 jQuery,因为它相对易于使用。
技巧非常简单:绝对定位背景图像的模糊版本,嵌套在一个伪元素中,比如::before,其不透明度设置为零。当光标位于内部元素上时,切换一个类,比如 .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>
关于html - 将鼠标悬停在链接上 - 背景应该变得模糊,但文本不会,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44180973/