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;
}

演示

否则你也可以使用这个

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

演示 2

Answer 2

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

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

完整且较短的版本：

由于所有规则都应用相同的属性，因此您可以将完整的 CSS 缩短为：

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

工作示例

Answer 3

这是一种解决方法：JSFiddle

#test3:hover ~ .testspan1 {

background: red;

}

#test3:hover ~ .testspan2 {

background: red;

}

您还可以使用逗号分隔类，例如#test3:hover ~ .testspan1, #test3:hover ~ .testspan2. 如果您希望两个跨度具有相同的样式，那将起作用。