CSS 可以在将鼠标悬停在另一个类上时修改一个类的样式吗？

使用 CSS 修改悬停时的类样式

是否可以使用单个 CSS 规则来更改一个类在悬停时的 CSS 属性来自单独类的元素？是否可以创建如下规则：

.item:hover .wrapper { /*some css*/ }

其中 .wrapper 不直接包含在 .item 中，而是位于文档的其他位置？

CSS 解决方案

是的，可以使用 CSS 选择器。使用 :hover 修改另一个元素的样式时，可以采取两种方法：

1.后代或子元素

如果 .wrapper 是 .item 的子元素，则可以使用此选择器：

.item:hover .wrapper {
    /* CSS properties to change */
}

2。同级元素

如果.wrapper是.item的同级元素，在DOM中出现在.item之后，你可以使用这个选择器：

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

JavaScript解决方案

虽然这个简单的任务不需要 JavaScript，但您可以使用它来实现所需的效果。这是一个示例：

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

其他信息

请务必注意，您的示例菜单元素似乎使用不同的类。将鼠标悬停在某个元素上时，其子菜单会在右侧显示为覆盖层。控制子菜单背景的类被命名为“wrapper”。要达到所需的效果，请使用上述同级选择器方法。

参考文献

• [CSS 2.1 选择器](https://www.w3.org /TR/CSS21/selectors.html)

以上是CSS 可以在将鼠标悬停在另一个类上时修改一个类的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！