使用 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 可以在将鼠标悬停在另一个类上时修改一个类的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
