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

我的代码一切正常，只是当我将鼠标悬停在链接上时，动画会被切断。我不知道如何解决这个问题，这样当我将鼠标悬停在链接上时，背景就会模糊，并像我之前写的那样进行动画处理

HTML:

---

浏览此链接，它有您问题的详细答案！！ 我也面临着同样的问题，这对我帮助很大

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

使用原生JS可以很容易地实现这一点，但我选择使用jQuery是因为它相对容易使用

诀窍很简单：绝对定位背景图像的模糊版本，嵌套在伪元素中，例如：：before，其不透明度设置为零。当光标位于内部元素上时，切换一个类，例如.blur，它将伪元素的不透明度设置为1

我们不能使用JS设置伪元素的CSS属性的原因是JS无法访问它

$（函数（）{
$（'.banner_link a'）。悬停（函数（）{
$（'#pic'）.addClass（'blur'）；
}，函数（）{
$（'#pic'）。removeClass（'blur'）；
});
});
#pic{
背景：url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
背景附件：固定；
背景重复：无重复；
背景尺寸：封面；
高度：500px；
位置：相对位置；
溢出：隐藏；
}
#图片：之前{
位置：绝对位置；
内容：''；
显示：块；
排名：0；
左：0；
底部：0；
右：0；
背景：url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
背景附件：固定；
背景重复：无重复；
背景尺寸：封面；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
不透明度：0；
过渡：不透明度。5s缓进缓出；
}
#图：模糊：之前{
不透明度：1；
}
.banner_link{
字体系列：“Raleway”；
字母间距：0.2米；
字体大小：13px；
颜色：#ffffff；
文本对齐：居中；
线高：16px；
填充顶部：45px；
位置：相对位置；
文本转换：大写；
}
.banner_链接a：：之后{
内容：''；
显示：块；
保证金：自动；
高度：1px；
宽度：90px；
背景：#ffffff；
过渡：宽度。2秒宽，背景色。5秒宽；
}
.banner_链接a:悬停：之后{
宽度：0px；
背景：透明；
}

链接
浏览此链接，它有您问题的详细答案！！
我也面临着同样的问题，这对我帮助很大


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

使用原生JS可以很容易地实现这一点，但我选择使用jQuery是因为它相对容易使用

诀窍很简单：绝对定位背景图像的模糊版本，嵌套在伪元素中，例如：：before，其不透明度设置为零。当光标位于内部元素上时，切换一个类，例如.blur，它将伪元素的不透明度设置为1

我们不能使用JS设置伪元素的CSS属性的原因是JS无法访问它


$（函数（）{
$（'.banner_link a'）。悬停（函数（）{
$（'#pic'）.addClass（'blur'）；
}，函数（）{
$（'#pic'）。removeClass（'blur'）；
});
});
#pic{
背景：url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
背景附件：固定；
背景重复：无重复；
背景尺寸：封面；
高度：500px；
位置：相对位置；
溢出：隐藏；
}
#图片：之前{
位置：绝对位置；
内容：''；
显示：块；
排名：0；
左：0；
底部：0；
右：0；
背景：url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
背景附件：固定；
背景重复：无重复；
背景尺寸：封面；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
不透明度：0；
过渡：不透明度。5s缓进缓出；
}
#图：模糊：之前{
不透明度：1；
}
.banner_link{
字体系列：“Raleway”；
字母间距：0.2米；
字体大小：13px；
颜色：#ffffff；
文本对齐：居中；
线高：16px；
填充顶部：45px；
位置：相对位置；
文本转换：大写；
}
.banner_链接a：：之后{
内容：''；
显示：块；
保证金：自动；
高度：1px；
宽度：90px；
背景：#ffffff；
过渡：宽度。2秒宽，背景色。5秒宽；
}
.banner_链接a:悬停：之后{
宽度：0px；
背景：透明；
}

链接
首先，移动

虚拟文本
首先，移动

虚拟文本
是的，但当鼠标悬停在img上时，链接会消失。我希望链接在悬停在链接上时保持原样，并且背景应该会变得模糊。请在全页视图中查看它，因为空间较少。它是相同的bruv。。我希望在文本上悬停时出现模糊。文本应保持原样，但图像应变得模糊..您的意思是希望图像上的
伪文本
保留图像的一部分吗？是的，但当将鼠标悬停在img上时链接消失。我希望链接在悬停在链接上时保持原样，并且背景应该会变得模糊。请在全页视图中查看它，因为空间较少。它是相同的bruv。。我希望在文本上悬停时出现模糊。文本应保持原样，但图像应变得模糊..您的意思是希望图像上的
伪文本
保留图像的一部分吗？您应该将问题标记为可能重复，而不是回答链接。您应该将问题标记为可能重复，而不是回答链接。
<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>

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

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