Question

目的是针对相同类型的所有其他元素＆amp;一个人徘徊时的水平相同。试图

a:hover ~ a

只是注意到在徘徊之前这不会以元素为目标...是否有css的解决方案？或者我应该以某种方式摆脱这个

Answer 1

这是parent或<选择者问题（of which there are many）的变体。我知道它并不完全相同，但我确定你可以想象兄弟选择器是如何从父选择器派生出来的。

乔纳森·斯诺克有一个excellent blog post关于为什么这不存在，我不认为我可以做得更好，所以如果感兴趣的话，我会留下你去读您。基本上，由于选择元素的方式，它在技术上是一项艰巨的工作，并且在代码结构方面会导致整个世界变得混乱。

所以简短的回答是，这不存在，你需要诉诸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");
    }
);

Fiddle

选择所有兄弟元素，而不仅仅是以下元素

2 个答案: