如何使用CSS类/ id来更改其他类属性？

Question

所以我想:悬停在一个元素上,我希望悬停来改变另一个类的属性.我该怎么做？我想将鼠标悬停在一个按钮上,然后将其他div的显示更改为:block.我只使用HTML和CSS.

Answer 1

你受限于css,但有css选择器的可能性.我已经让你成为一个可能的解决方案:

CSS:

.item1:hover ~ .item3 {
    background-color: red;
}

HTML

<div class="item1">
    Hoverable item
</div>

<div class="item2">
    Dummy item
</div>

<div class="item3">
    Item to change
</div>

在这里~告诉寻找成功的元素.如果你想要下一个元素,你可以使用+.

有关选择器的更多信息:

Answer 2

在不使用 JS 的情况下，您可以更改悬停元素的子节点。例如，如果您有：

<div class="container">
    <div class="box">Content</div>
</div>

您可以使用以下代码更改 .box 属性：

.container:hover .box