html - CSS删除一个孩子的模糊过滤器

Question

我给了一个父元素一个模糊过滤器，但我想删除一个子元素的过滤器。我该怎么做？

这是我的 HTML：

<div class="left__card">
 <div class="left__card--head">
  <img src="../images/Rawand.jpg" alt="Img" />
 </div>
 <div class="left__card--body">
  <div class="row">
   <h1 class="Name">Rawand Rebwar</h1>
   <h2 class="stage">2'nd Stage</h2>
  </div>
  <p class="paragraph">
   Im computer science student in university of sulaimany , i developed front end for
   this project..
  </p>
  <a href="#" class="profile">Click To See Profile</a>
 </div>
</div>

这是CSS代码：

.left__card:hover {
    -webkit-filter: blur(3px)
    -moz-filter: blur(3px)
    -o-filter: blur(3px)
    filter: blur(3px)
}

我也想消除班级资料上的模糊。

标签： htmlcss

Answer 1

将您的卡片内部放入自己的容器中，并将过滤器分配给该容器。
链接应该放在外面。

<div class="left__card">
  <div class="blurry">
    <div class="left__card--head">
      <img src="../images/Rawand.jpg" alt="Img" />
    </div>
    <div class="left__card--body">
      <div class="row">
        <h1 class="Name">Rawand Rebwar</h1>
        <h2 class="stage">2'nd Stage</h2>
      </div>
      <p class="paragraph">
        Im computer science student in university of sulaimany , i developed front end for this project..
      </p>
    </div>
  </div>
  <a href="#" class="profile">Click To See Profile</a>
</div>

.left__card:hover .blurry {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}