Question

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

任何想法？

THANKYOU。

＆＃13;

 .color1 > div:hover {
        background-color: yellow;
    }
    .sub{
        display: none;
    }
    .globalList:hover .sub {
        display: block !important; 
    }

＆＃13;

<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>

＆＃13;

Answer 1

在li标签上设置悬停样式

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

除非您还希望子菜单具有bg颜色，否则将其移到div中

Answer 2

这样的东西？

 .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
                <ul class="sub">
                    <li class="Sub1"><div>Sublist1</div></li>
                    <li class="Sub2"><div>Sublist2</div></li>
                </ul>
                <!-- MOVE </> DIV OVER HERE! -->
                </div>
            </li>
             <li>
                 <div>Menu2</div>
                 <ul>
                    <li></li>
                    <li></li>
                 </ul>
            
             </li>
          </ul>
    </body>
</html>

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

2 个答案: