Question

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

你如何设置它以便第三个悬停起作用？

这是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

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

#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

Answer 3

以下是解决方法：JSFiddle

#test3:hover ~ .testspan1 {

background: red;

}

#test3:hover ~ .testspan2 {

background: red;

}

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

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

3 个答案: