html - 如何避免重叠的 HTML 标签来突出显示文本

Question

在下面的代码中，我有三个悬停文本和世界“你好”。前两个突出显示“你好”的部分，我希望第三个突出显示“你好”的所有部分。将所有前两个跨度包装在第三个跨度中是行不通的，我明白为什么。我知道我不能重叠 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