html - 如何在悬停时突出显示多个跨度标签？

Question

我不确定这是否可能，但是，如果我像这样在标签内放置一些文本；

The quick <span>brown</span> fox jumps <span>over</span> the angry dog

我在 CSS 中有这个；

span:hover{ 
    background-color: green;
}

当我将鼠标悬停在“棕色”或“上方”时，我怎样才能使它们都突出显示？

Answer 1

没有 previous sibling selector , 你可以使用 General sibling selector针对以下 <span>就像这样:

span:hover,
span:hover ~ span {
    background-color: gold;
}

EXAMPLE HERE

或者触发 :hover影响整条线，用一个额外的元素包裹它们，例如<p>然后使用 :hover包装器的伪元素如下所示:

EXAMPLE HERE

<p>The quick <span>brown</span> fox jumps <span>over</span> the angry dog</p>

p:hover span { 
    background-color: green;
}