在没有 JS 的情况下对另一个悬停的元素应用效果答案

【问题标题】：Apply effect to Element on Hover of Another without JS在没有 JS 的情况下对另一个悬停的元素应用效果
【发布时间】：2014-12-17 16:35:59
【问题描述】：

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

我正在尝试做的是将模糊效果（用于兼容性的 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>

【问题讨论】：

我想你忘了给他们都加上.oi这个类。
您可以在问题本身中发布您的代码吗？并非我们所有人都可以访问 codepen :(
@KyleEmmanuel 不，我只是想影响那个。
oi 的意义何在？
@nothingisnecessary 什么都没有。只是我想到的一个随机的类名。

标签： html css

【解决方案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>

【讨论】：

悬停时会模糊它们，这有点使它无法使用:)
已修复；现在悬停的按钮删除了filter

【解决方案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>

【讨论】：