html - 在没有 JS 的情况下将效果应用于另一个元素的悬停

Question

我有这个代码:http://codepen.io/hwg/pen/azZoyp

我正在尝试做的是将模糊效果(SVG 滤镜以实现兼容性)应用于悬停在另一个元素上的其他元素。

CSS最重要的部分如下

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

这使用 ~ 选择器来影响具有 oi 类的链接的兄弟。这很好，但它只影响悬停元素之后的元素。并非容器 div 中的所有 sibling 。

仅在 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:none去除被选元素的filter效果.即:

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