使用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;
}

但是〜运算符只能向前运行,所以它对第一个链接起作用,但不适用于第二个链接.

Answer 1

通常,CSS中没有先前的兄弟选择器,这是为了使它能够应用于文档的单个遍历.但在您的具体情况下,您可以采取以下方法:

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

...虽然这确实依赖于兄弟姐妹完全填充父母,因为任何单独悬停在父母身上都会突出显示两个孩子.

或者,基于(jQuery)脚本的方法将是:

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