html - CSS 在悬停元素之前设置元素样式？

Question

我想改变我之前div的任何风格：ul

<style>
ul:hover + #x {
    display:none;
}
</style>

<div id="x">c</div>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

当我将放在div之后时ul，它可以工作。（当然，因为CSS 中的选择了 .之后的+所有 #x 。）ul

但我需要让它以另一种方式工作。我不想使用 JavaScript。

我不能把放在div后面ul，因为它会破坏我已经放入的所有其他样式。

score 1 · Accepted Answer

CSS 中没有“前一个兄弟”选择器。你想要的可以使用 JavaScript 来完成，但目前还没有纯 CSS 的方式来实现。

这就是说，元素没有必要按照它们被标记的顺序出现。您可以将#xdiv 放在标记中的无序列表之后，并使用 CSS 使其出现在列表之前。这样，您仍然可以将+选择器用于您的目的。

score 0 · Accepted Answer

如果您不完全反对使用 JavaScript，那么您可以在class所有标签divs之前添加 aul并使用 CSS 来设置它的样式class。

我认为通过硬编码方式执行此操作是不切实际的，因此您可以使用 JavaScript 来执行此操作onLoad，这样脚本将在页面加载时仅运行一次，并且您避免event listener绑定到hover事件。

2 回答 2