html - 使用 CSS 将鼠标悬停在父子外部的另一个标签上时更改标签样式

Question

我有这个示例代码:

HTML:

<ul>
    <li class="main">Main</li>
    <li class="text">Text</li>
</ul>

CSS:

.main:hover + .text {
    background-color: green;
}

这是 demo link

现在，当我将鼠标悬停在 .main 上时，.text 的样式发生了变化。这是更正。

现在我希望这段 HTML 代码发生这种情况:

<ul>
    <li class="main">Main</li>
</ul>
<ul>
    <li class="text">Text</li>
</ul>

我想当我悬停在.main上时，.text的样式想要改变。我试试这个 CSS 代码:

.main:hover + .text {
    background-color: green;
}

但是不起作用。我如何在不使用 javascript 的情况下执行此操作？

这是 demo link

Answer 1

由于无法选择父元素(选择 ul < li 等当然是一个有用的功能)，如果不涉及 JavaScript，它就无法工作。

虽然可能有一个解决方案:Example

这是通过使用波浪号 (~) 指示的通用兄弟选择器完成的:

.main:hover ~ ul>.text {
    background-color: green;
}

但此解决方案假定元素具有相同的父元素。

编辑:相邻兄弟选择器 (+) 和一般兄弟选择器 (~) 之间的区别在于，如果 a + b b 在标记中直接跟在 a 之后，则第一个选择器才起作用。第二种不太严格。