用CSS突出显示悬停上的另一个元素

Question

我有一个HTML，如下所示：

<p>
    <a id="foo" href="#bar">FOO</a><br/>
    <a id="bar" href="#foo">BAR</a><br/>
</p>

现在我想在"FOO“盘旋时突出显示"BAR”，反之亦然。有什么方法可以在CSS3中实现这一点，还是我需要jQuery？

我试过这样做：

a#foo:hover ~ a[href="#foo"] {
    color:red;
    background-color:blue;
}
a#bar:hover ~ a[href="#bar"] {
    color:red;
    background-color:blue;
}

但是~运算符只向前工作，所以它对第一个环节很好，但对第二个环节却不起作用。

另见此处：http://jsfiddle.net/pw4q60Lk/

Answer 1

通常，CSS中没有以前的同级选择器，这是为了使它能够应用于文档的单个遍历。但在您的具体情况下，您可以采取以下方法：

p:hover a:not(:hover) {
    color: red;
    background-color: blue;
}

http://jsfiddle.net/pw4q60Lk/2/

...although --这确实依赖于完全填充父级的兄弟姐妹，因为在父节点上的任何悬停都会突出显示两个子节点。

或者，一种基于(jQuery)脚本的方法是：

$('a').hover(
    function() { $(this).siblings().addClass('highlight') },
    function() { $(this).siblings().removeClass('highlight') }
);

http://jsfiddle.net/pw4q60Lk/12/

Answer 2

正如本帖子中所提到的，以前没有同级选择器。

在Jquery的帮助下，您可以使用、和mouseover()函数来实现它。

<p>
    <a id="foo" href="#bar">FOO</a><br/>
    <a id="bar" href="#foo">BAR</a><br/>
</p>

Jquery

$("#bar").hover(function(){
    $('#foo').css({'color':'red','background-color':'blue' });
});
$("#bar").mouseout(function(){
    $('#foo').css({'color':'blue','background-color':'white' });
});

$("#foo").hover(function(){
    $('#bar').css({'color':'red','background-color':'blue' });
});
$("#foo").mouseout(function(){
    $('#bar').css({'color':'blue','background-color':'white' });
});

小提琴在这里

Answer 3

正如这些答案所提到的，没有纯粹的css选择器。

CSS:选择以前的兄弟姐妹

是否有“以前的兄弟”CSS选择器？

但是，有了jQuery，您可以做到

$('a').hover(function(){
    $('a').not(this).addClass('hovered');
},
function(){
    $('a').not(this).removeClass('hovered');
});

使用风格

.hovered{
    color:red;
    background-color:blue;
}

演示