Question

我有一个HTML，如下所示：

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

现在我想突出显示＆＃34; BAR＆＃34;当＆＃34; FOO＆＃34;徘徊，反之亦然。有没有办法在CSS3中实现这一点，还是我需要jQuery？

我试过这个：

nameA     statusA     nameB     statusB
a         Q           x         X
b         Q           y         X
c         X           z         Q
d         X           o         Q
e         Q           p         X
f         Q           r         Q

但〜运算符只能向前运行，所以它对第一个链接工作正常，但不适用于第二个链接。

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

Answer 1

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

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

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

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

或者，基于（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突出显示悬停时的其他元素

4 个答案: