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

但是 ~ 运算符只能向前工作，所以它对第一个 link 可以正常工作，但对第二个就不行。

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

Answer 1

一般来说，CSS中没有previous sibling selector，这是为了使其能够应用于文档的单次遍历。但在您的具体情况下，您可以采用以下方法：

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

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

...虽然这确实依赖于兄弟姐妹完全填满 parent，因为任何悬停在 parent 上都会突出显示 children。

或者（jQuery）基于脚本的方法是：

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

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

Answer 2

如本post所述，没有上一个兄弟选择器。

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

HTML

<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' });
});

Fiddle is here

Answer 3

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

CSS: select previous sibling

Is there a "previous sibling" CSS selector?

但是，使用 jQuery 你可以做到

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

使用风格

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

demo

Answer 4

$("a").on('mouseover', function () {
    var self = $(this);
    self.removeClass("hg");
    self.siblings().addClass("hg");
});

.hg {
    color:red;
}

JS Fiddle- Demo

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

Highlight another elements on hover with CSS

html

css

jquery

hover