希望元素在后面的模糊元素中可见

Question

如何在悬停时仅对一个元素应用模糊效果，同时保持另一个元素不受影响？ CSS 配置涉及在悬停时将

filter: blur(3px);

属性设置为父元素 (.item)，同时确保子元素 (.codeCheck) 不受影响。

我尝试为父元素（.item）的悬停状态定义样式规则，并删除该规则中子元素（.codeCheck）的模糊效果，但什么也没有

#projectDiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 30px;
  width: 100%;
  height: fit-content;
}

.item {
  z-index: 0;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 400px;
  width: 250px;
  border: 5px solid blue;
  background-color: #ea342300;
}

.item img {
  margin: 0;
  width: 100%;
  height: 200px;
  background-size: cover;
}

.item p {
  color: blue;
  font-size: 14px;
  font-family: 'kabeteh';
  font-weight: bolder;
  margin: 0;
  padding: 10px;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.codeCheck {
  position: absolute;
  left: 170px;
  visibility: hidden;
  display: none;
  background-color: white;
  transition: transform .5s ease;
}

.codeCheck a {
  padding: 5px;
  background-color: white;
  text-orientation: upright;
  writing-mode: vertical-lr;
  text-decoration: none;
  font-family: 'secondFont';
}

.item:hover {
  z-index: 0;
  filter: blur(3px);
  box-shadow: 1px 1px 20px 0px blue;
}

.item:hover .codeCheck {
  z-index: 9;
  transform: translateY(10%);
  display: block;
  visibility: visible;
}

<div class="item">
  <p id="codeCheck3" class="codeCheck"> <a href="#">Code</a> </p>
</div>

Answer 1

模糊会影响父级和子级，因此必须将效果和内容分开。在此示例代码中，我将两个元素包装在不再包含边框的父元素中。第一个元素现在负责边框和模糊效果。它还可以包含您可能想要模糊的任何其他内容。我使用了相对定位，但你可以用不同的方式来做到这一点。

#projectDiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 30px;
  width: 100%;
  height: fit-content;
}

.item {
  position: relative;
  z-index: 0;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 400px;
  width: 250px;
}

.item img {
  margin: 0;
  width: 100%;
  height: 200px;
  background-size: cover;
}

.item p {
  color: blue;
  font-size: 14px;
  font-family: 'kabeteh';
  font-weight: bolder;
  margin: 0;
  padding: 10px;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rect {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  flex-direction: column;
  justify-content: flex-start;
  height: 400px;
  width: 250px;
  border: 5px solid blue;
  background-color: #ea342300;
}

.codeCheck {
  position: absolute;
  left: 170px;
  visibility: hidden;
  display: none;
  background-color: white;
  transition: transform .5s ease;
}

.codeCheck a {
  padding: 5px;
  background-color: white;
  text-orientation: upright;
  writing-mode: vertical-lr;
  text-decoration: none;
  font-family: 'secondFont';
}

.item:hover .rect {
  z-index: 0;
  filter: blur(3px);
  box-shadow: 1px 1px 20px 0px blue;
}

.item:hover .codeCheck {
  z-index: 9;
  transform: translateY(10%);
  display: block;
  visibility: visible;
}

<div class="item">
  <div class="rect"></div>
  <p id="codeCheck3" class="codeCheck"> <a href="#">Code</a> </p>
</div>