css - 选择所有兄弟元素，而不仅仅是跟随元素

Question

目的是在悬停时定位相同类型和相同级别的所有其他元素。试过了

a:hover ~ a

只是注意到这并不针对悬停元素之前的元素......是否有使用css的解决方案？还是我应该以某种方式摆脱困境

Answer 1

这是parentor <selector 问题（其中 有 很多 ）的变体。 我知道这并不完全相同，但我相信您可以想象同级选择器是如何从父选择器派生的。

Jonathan Snook 有一篇很棒的博客文章说明了为什么它不存在，我认为我不能做得更好，所以如果你感兴趣的话，我会让你阅读。基本上，由于选择元素的方式，这在技术上是一项困难的工作，并且在代码结构方面会导致整个世界的混乱。

所以简短的回答是，这不存在，恐怕你需要求助于 JS 来修复它。

编辑：只是几个修复示例。使用 jQuery：

$(selector).siblings().css({...});

或者如果你想包含元素：

$(selector).parent().children().css({...});

或者在香草 JS 中：

var element = document.querySelectorAll(selector); // or getElementById or whatever
var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
    if (siblings[i] !== element) { // optional
        siblings[i].style.color = 'red';
    }
}

Answer 2

您可以使用 jQuery 而不是 CSS 来切换悬停状态：

HTML：

​<div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

div a {color: #000;}
div a.hover {color: #00f;}

​ jQuery：

$("div a").hover(
    function(){
        $("div a").addClass("hover");
    },
    function(){
        $("div a").removeClass("hover");
    }
);

小提琴