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

Question

我不确定是否有可能，但是，如果我在这样的标签内放置了一些文本， ;

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

和我有这个在CSS;

span:hover{ 
    background-color: green; 
} 

我怎么能当我悬停在'棕色'或'结束'，他们都变得突出显示？

Answer 1

没有previous sibling selector，你既可以使用General sibling selector目标以下<span>就像这样：

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

EXAMPLE HERE

或火灾的整条生产线的:hover作用，由他们包装附加元素，例如<p>然后用:hover伪元素的包装，像这样：

EXAMPLE HERE

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

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

Answer 2

尝试只是这一点。

Working Fiddle

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

好运！

Answer 3

您正在寻找无法实现只能用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 4

我即将发布相同的web-tiki ...但添加一个类的CSS广度保证的财产，因为我更喜欢它使用只是在css表“悬停”效果的更好

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

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

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