javascript - 悬停其他元素时保持背景颜色

标签 javascript jquery html css

我有下面的菜单 HTML 结构, 当用户在子列表中导航时,我尝试保留背景 div 的颜色

有什么想法吗?

谢谢。

 .color1 > div:hover {
        background-color: yellow;
    }
    .sub{
        display: none;
    }
    .globalList:hover .sub {
        display: block !important; 
    }
<html>
    <body>
        <ul class="MyList">
            <li class="globalList color1">
                <div>Menu1</div>
                <ul class="sub">
                    <li class="Sub1"><div>Sublist1</div></li>
                    <li class="Sub2"><div>Sublist2</div></li>
                </ul>
            </li>
             <li>
                 <div>Menu2</div>
                 <ul>
                    <li></li>
                    <li></li>
                 </ul>
            
             </li>
          </ul>
    </body>
</html>

最佳答案

在 li 标签上使用悬停样式

.color1:hover > div {
    background-color: yellow;
}

除非您还希望子菜单具有背景颜色,否则将其移动到 div 内

关于javascript - 悬停其他元素时保持背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44742293/

相关文章:

javascript - 使用 toggleClass() 创建的类不会在点击事件时发出警报

javascript - 图像 slider 全屏

javascript - 实现 Fuelux 向导时未捕获的类型错误

javascript - CSS 定位元素的方式,无论屏幕大小如何,一次只有元素可见

javascript - 如何修改类的一个元素而不用相同的 CSS 类打扰其余元素?

jquery - 为什么不重置高度

javascript - 在更深的容器组件中访问单个 Redux 商店的最佳实现是什么?

javascript - 使用 debounce 将 React 状态同步到 Meteor 集合

javascript - jquery中如何获取基本选择器

javascript - 当函数取消隐藏 2 个元素时如何在 javascript 中显示/隐藏?