时间戳

首页 > 解决方案 > CSS 选择器以匹配除选定的一个（“This”）之外的同一类的所有其他元素

css - CSS 选择器以匹配除选定的一个（“This”）之外的同一类的所有其他元素

问题描述

我的类有多个元素.foo：

<a href="#" class="foo">Hello!</a>
<a href="#" class="foo">¡Hola!</a>
<a href="#" class="foo">Bonjour !</a>

当我将鼠标悬停在其中一个上时，我希望能够将样式应用于所有.foo元素，除了悬停在.

我想我正在寻找与 jQuery 中的 $(this) 等效的 CSS。

像这样的东西，也许：

.foo:hover::not(this) {
    color:fuchsia;
}

标签： csscss-selectors

解决方案

考虑为您的元素创建一个容器，您可以轻松地做到这一点：

.box {
 display:inline-block;
}
.box:hover a {
  color:red;
}
.box a:hover {
  color:initial;
}
<div class="box">
<a href="#" class="foo">Hello!</a>
<a href="#" class="foo">¡Hola!</a>
<a href="#" class="foo">Bonjour !</a>
</div>

推荐阅读