如何避免重叠HTML标记以突出显示文字

Question

在下面的代码中，我有三个悬停文本和世界“hello”。 “hello”的前两个亮点部分，我希望第三个部分突出显示“hello”。在第三个范围中包装所有前两个跨度不起作用，我理解为什么。我知道我不能重叠HTML标签，并且我不知道嵌套是否是解决方案。

你会如何设置这样的第三个悬停工作？

http://jsfiddle.net/CAWhP/3/

这里的HTML：

<div id="test1"> highlight hel in hello</div> 

<div id="test2"> highlight lo in hello</div> 

<div id="test3"> highlight all of hello</div> 

<span class="testspan1"> hel</span><span class="testspan2">lo </span> 

这里的CSS：

#test1:hover ~ .testspan1{ 

    background: red; 
} 

#test2:hover ~ .testspan2{ 

    background: red; 
} 
#test3:hover ~ .testspan3{ 

    background: red; 
} 

Answer 1

选择相关的元素

#test3:hover ~ span{ 
    background: red; 
} 

Demo

要不然你也可以使用这个

#test3:hover ~ span.testspan1, #test3:hover ~ span.testspan2 { 
    background: red; 
} 

Demo 2

Answer 2

这里是一个解决办法：JSFiddle

#test3:hover ~ .testspan1 { 

background: red; 

} 

#test3:hover ~ .testspan2 { 

background: red; 

} 

你也可以用逗号分开这些类，如#test3:hover ~ .testspan1, #test3:hover ~ .testspan2。如果您希望两个跨度具有相同的样式，那么这将起作用。

Answer 3

不知道为什么你要做到这一点，但解决问题，我想你可以这样做：

#test3:hover ~ .testspan1, 
#test3:hover ~ .testspan2 { 
    background: red; 
} 

完整和更短的版本：

由于所有的规则适用相同的属性，你可以缩短你的完整的CSS来此：

#test1:hover ~ .testspan1, 
#test2:hover ~ .testspan2, 
#test3:hover ~ .testspan1, 
#test3:hover ~ .testspan2 
{ 
    background: red; 
} 

Working example