如何在悬停时突出显示多个span标签？

Question

我不确定是否可以，但是，如果我在标签中放入一些文字，

The quick <span>brown</span> fox jumps <span>over</span> the angry dog

而且我在CSS中有这个;

span:hover{ 
    background-color: green;
}

当我将鼠标悬停在“棕色”或“上方”时，如何使它们都突出显示？

Answer 1

没有先前的兄弟选择器 ，您可以使用General兄弟选择器来定位以下<span>如下所示：

span:hover,
span:hover ~ span {
    background-color: gold;
}

这里的例子

或在整个行上触发:hover效果，用附加元素（例如<p>包装它们，然后对包装器使用:hover伪元素，如下所示：

这里的例子

<p>The quick <span>brown</span> fox jumps <span>over</span> the angry dog</p>

p:hover span { 
    background-color: green;
}

Answer 2

您正在寻找的确切行为不能仅通过CSS来实现，而可以通过简单的jQuery来实现：

DEMO

$('span').hover(function(){
    $('span').css("background-color", "green");
}, function(){
    $('span').css("background-color", "none");
});

如果您有几个句子，请使用： DEMO

$('span').hover(function(){
    $(this).parent().children('span').css("background-color", "green");
}, function(){
    $(this).parent().children('span').css("background-color", "none");
});

Answer 3

我本来要发布与web-tiki相同的内容，但是为css属性的span insteed添加了一个类，因为我更喜欢它，以便将来仅使用css工作表更改“悬停”效果

$("span").hover(function() {
$('span').addClass( "SpanClass2" );
}, function() {
$('span').removeClass( "SpanClass2" );
});

http://jsfiddle.net/wr1z8h0a/1/

Answer 4

试试这个吧。

工作小提琴

div:hover span{ 
    background-color: green;
}

祝好运！