HTML/CSS：在悬停时显示一个元素，而其余部分则模糊

Question

我正在制作作品集，当您将鼠标悬停在某些文本块上时，它们会变得模糊。重点是让文本 «Learn More» 出现在该块中，而其余文本是模糊的。我为此苦苦挣扎。请帮忙。

这是我的文本块：

    <div class="card-body about-me-title ">
      <h5 class="text-center overlay"><a href="#">Learn More</a> </h5>
      <div class="blur-in">
        <h4 class="card-title  p-1 h1">
          <i class="fas fa-arrow-alt-circle-right pl-1"></i>
          Self-taught
        </h4>
        <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>    
      </div>
    </div>

这是它的样式：

.about-me-title {
    border: 1px solid white;
    border-radius: 50px;   
}

.card {
    border: none;
}   

.blur-in {
    transition: all 0.2s ease;
    -webkit-filter: blur(0px);  
}

.blur-in:hover {
    -webkit-filter: blur(12px);
}

.overlay a{
    position: absolute;
    margin-left: auto;
    margin-left: auto;
    left: 0;
    right: 0;
    font-size: 40px;
    margin-top: 2em;
}

如您所见，«了解更多» 文本在那里，但我希望将其隐藏，并在悬停时显示，因此整个文本框在悬停时变成了一个按钮。我尝试了 «visibility» 和 «display» 属性，但没有成功。

感谢您的宝贵时间

Answer 1

您尝试过 jQuery 吗？我认为使用 .hide() 和 .show() 或 .hover() 方法可以帮助您实现此行为。可能是这样的。

$('.text-center').hover(() => {
  $(this).toggle();
});

切换可能不是正确的方法，但它可以帮助查看 "hide/show" 行为。

Answer 2

HTML 文件

    .about-me-title {
    border: 1px solid white;
    border-radius: 50px;   
}

.card {
    border: none;
}   

.blur-in {
    transition: all 0.2s ease;
    -webkit-filter: blur(0px);  
}

.blur-in:hover {
    -webkit-filter: blur(12px);
}

.overlay a{
    position: absolute;
    margin-left: auto;
    margin-left: auto;
    left: 0;
    right: 0;
    font-size: 40px;
    margin-top: 2em;
    -webkit-filter: blur(12px);
    color: RGBA(0.0,0.0,0.0,0.0);
}

.Learn-More:hover{
  transition: all 0.5s ease;
  -webkit-filter: blur(0px);
  color: RGBA(0.0,0.0,0.0,1.0);
}

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <link rel="stylesheet" href="estilo.css">
 </head>
 <body>
    <div class="card-body about-me-title ">
      <h5 class="text-center overlay"><a href="#" class="Learn-More">Learn More</a> </h5>
      <div class="blur-in">
        <h4 class="card-title  p-1 h1">
          <i class="fas fa-arrow-alt-circle-right pl-1"></i>
          Self-taught
        </h4>
        <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>    
      </div>
    </div>
 </body>
 </html>

Answer 3

这样的怎么样？

.about-me-title {
  border: 1px solid white;
  border-radius: 50px;
}

.card {
  border: none;
}

.blur-in {
  transition: all 0.2s ease;
  -webkit-filter: blur(0px);
}

.blur-in:hover {
  -webkit-filter: blur(12px);
}

.overlay a {

  position: absolute;
  margin-left: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  font-size: 40px;
  margin-top: 0em;
  visibility: hidden;
  opacity: 0;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.card-body:hover .overlay a {
  visibility: visible;
  opacity: 1;
}

<div class="card-body about-me-title ">
  <h5 class="overlay text-center"><a href="#">Learn More</a> </h5>
  <div class="blur-hover">
    <div class="blur-in">
      <h4 class="card-title  p-1 h1">
        <i class="fas fa-arrow-alt-circle-right pl-1"></i>
        Self-taught
      </h4>
      <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>
    </div>
  </div>
</div>

所以我添加了一个名为 Blur-in 的额外 div，并确保将叠加文本放在 div 之外，否则它也会被模糊。您可以根据需要更改叠加层的边距、位置和样式。

没有JS。只有 CSS 和 HTML。

更新：

这是一个纯粹的 CSS 解决方案。我不知道为什么我以前没有考虑过这个，但是如果你只是把 div 上移一层，你可以把所有的文本包装成一个 link。您还需要删除您添加的 Z-Index。最后，只需格式化文本，使其看起来像您想要的那样（请参阅 CSS 中的 {}，text/ link 样式）。希望这对您有所帮助！

.about-me-title {
  border: 1px solid white;
  border-radius: 50px;
}

.card {
  border: none;
}

.blur-in {
  transition: all 0.2s ease;
  -webkit-filter: blur(0px);

}

.blur-in:hover {
  -webkit-filter: blur(12px);
}

.overlay {
  position: absolute;
  margin-left: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  font-size: 40px;
  margin-top: 0em;
  visibility: hidden;
  opacity: 0;

}

.card-body:hover .overlay {
  visibility: visible;
  opacity: 1;

}

a {
  text-decoration: none;
}

<div class="card-body about-me-title ">
<a href="#">
  <h5 class="overlay text-center">Learn More</h5>
  <div class="blur-hover">
    <div class="blur-in">
      <h4 class="card-title  p-1 h1">
        <i class="fas fa-arrow-alt-circle-right pl-1"></i>
        Self-taught
      </h4>
      <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>
    </div>
  </div>
  </a> 
</div>

HTML/CSS：在悬停时显示一个元素，而其余部分则模糊

HTML/CSS: Show an element on hover while the rest is blurred

html

css

hover