Question

我尝试做的是将模糊效果（兼容性的SVG过滤器）应用到另一个元素悬停时的其他元素。

CSS最重要的部分如下

.oi:hover ~ a {color:green;filter: url('#blur');}

这使用~选择器以使oi类的链接的兄弟姐妹生效。这很好，但它只会影响之后的元素。不是容器div中的所有兄弟姐妹。

这只能在CSS中使用吗？

我已经看到你可以在这里看到使用JS：Using jQuery to Hover over one element and apply the effect in another，以及其他问题。

如果可能，我只是不想使用JS，请提供任何帮助！

谢谢！

嵌入代码：

.btn { background:lightblue; padding:1em; font-family:sans-serif; margin:0.4em; display:inline-block; transition:0.25s all ease-in-out; border-radius: 5px; } .oi ~ a {color:red;} .oi:hover ~ a {color:green;filter: url('#blur');} .oi:hover {transform: scale(1.5,1.5);color:red;} div {margin: 100px auto;display:block;width:100%;}

<div> <a class="btn">Cholla</a> <a class="btn">Cholla</a> <a class="btn oi">Cholla</a> <a class="btn">Cholla</a> <a class="btn">Cholla</a> <a class="btn">Cholla</a> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5" /> </filter> </defs> </svg>

Answer 1

CSS通用兄弟选择器只会在该元素之后选择兄弟姐妹。（来源：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors）

使用父元素类或btn类，然后在所选元素上使用filter删除filter:none效果。即：

.btn {
  background:lightblue;
  padding:1em;
  font-family:sans-serif;
  margin:0.4em;
  display:inline-block;
  transition:0.25s all ease-in-out;
  border-radius: 5px;
  color: red;
}

.oi {color:black;}
.btn_wrapper {margin: 100px auto;padding:0;display:block;width:100%;}
.btn_wrapper:hover .btn {color:green;filter: url('#blur');}
.btn_wrapper:hover .btn:hover {transform: scale(1.5,1.5);color:red;filter: none;}

<div class="btn_wrapper">
  <a class="btn">Cholla</a>
  <a class="btn">Cholla</a>
  <a class="btn oi">Cholla</a>
  <a class="btn">Cholla</a>
  <a class="btn">Cholla</a>
  <a class="btn">Cholla</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

Answer 2

这只能在CSS中使用吗？

不幸的是，不是以有弹性的方式。

CSS只能沿着DOM下降（级联），因为这样的选择器只能在同一级别上识别元素的子元素或者出现在它之后的兄弟元素。

为了达到你想要的目的，你可能需要求助于一个javascript解决方案 - 你想要实现的目标在jQuery中是微不足道的，例如：

$('.oi').on('mouseover', function(){
  $(this).siblings('a')....
});

或者，尽可能接近CSS：

.btn {
  background: lightblue;
  padding: 1em;
  font-family: sans-serif;
  margin: 0.4em;
  display: inline-block;
  transition: 0.25s all ease-in-out;
  border-radius: 5px;
}
a {
  color: red;
}
div:hover a {
  color: green;
  filter: url('#blur');
}
.oi:hover {
  transform: scale(1.5, 1.5);
  color: red;
}
div {
  margin: 100px auto;
  display: block;
  width: 100%;
}

<div>
  <a class="btn">Cholla</a>
  <a class="btn">Cholla</a>
  <a class="btn oi">Cholla</a>
  <a class="btn">Cholla</a>
  <a class="btn">Cholla</a>
  <a class="btn">Cholla</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

在没有JS的情况下将效果应用于另一个Hover

2 个答案: