使用CSS在鼠标悬停时突出显示其他元素。

6 浏览
0 Comments

使用CSS在鼠标悬停时突出显示其他元素。

此问题已经有了答案：

是否存在“前一个同级元素”选择器？

我有一个看起来像这样的HTML：

FOO BAR

 

现在我想在“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/

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

正如在这个帖子中提到的，不存在先前兄弟选择器。

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

HTML


    FOO
    BAR

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

0
0 Comments

一般来说，在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/

0