在下面的代码中,我有三个悬停文本和世界“你好”。前两个突出显示“你好”的部分,我希望第三个突出显示“你好”的所有部分。将所有前两个跨度包装在第三个跨度中是行不通的,我明白为什么。我知道我不能重叠 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;
}
最佳答案
选择相关元素
#test3:hover ~ span{
background: red;
}
否则你也可以用这个
#test3:hover ~ span.testspan1, #test3:hover ~ span.testspan2 {
background: red;
}
关于html - 如何避免重叠的 HTML 标签来突出显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14912256/