Question

我的代码一切正常，但是当我将鼠标悬停在链接上时，动画将被切断。我不知道如何解决问题，以便当我将鼠标悬停在链接上时，背景应该模糊并按照我已经写过的方式进行动画制作。

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;
  }

The fiddle

Answer 1

通过此链接，它有您的问题的详细答案！我遇到了同样的问题，它帮了我很多！

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>

Answer 2

首先，在html dom中的锚标记<img>之后移动<a>标记

<div class="class">

  <a href="#" class="hoverme">
    <div class="text">
      <h3>goalkeepers</h3>
    </div>
  </a>

  <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
</div>

您可以使用兄弟选择器在悬停锚标记

时选择图像

.hoverme:hover + img { ...

<强>段

＆＃13;

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;
}

.hoverme {
  position: absolute;
  left: 80%;
  top: 25%;
}

.hoverme:hover+img {
  -webkit-filter: blur(10px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  transform: scale(1.05);
}

.dummy-text {
  position: relative;
  transform: rotate(-90deg);
  font-size: 1em;
  z-index: 100;
  width: 100px;
  right: -336px;
  top: -81px;
  /* font-weight: bold; */
  color: white;
}


}

＆＃13;

<div class="class">

  <a href="#" class="hoverme">
    <div class="text">
      <h3>goalkeepers</h3>
    </div>
  </a>

  <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
  <div class="dummy-text">Dummy-Text</div>
</div>

＆＃13;

将鼠标悬停在链接上 - 背景应该变得模糊，但不是文本

2 个答案: