Question

我有一个带有子菜单的下拉菜单，由列表组成：

<ul>
   <li class="list_item">Item 1</li>
   <li class="list_item">Item 2</li>
      <ul>
         <li class="sub_list_item">Sub Item 1</li>
         <li class="sub_list_item">Sub Item 2</li>
      </ul>
   <li class="list_item">Item 3</li>
</ul>

我的CSS会在悬停时更改这些项目的background-color。我想要做的是保持Item 2的背景颜色改变，同时将鼠标悬停在任何给定Sub Item上

任何简单的方法吗？

CSS：

.list_item:hover {
    background-color:green;
}
.sub_list_item:hover {
    background-color:yellow;
}

Answer 1

将第2项包裹在<ul>标记

周围

<ul>
   <li class="list_item">Item 1</li>
   <li class="list_item">Item 2
      <ul>
         <li class="sub_list_item">Sub Item 1</li>
         <li class="sub_list_item">Sub Item 2</li>
      </ul>
   </li>
   <li class="list_item">Item 3</li>
</ul>

Answer 2

您可以使用直接子选择器>定位特定的li，而不是任何给定的li或ul。

jsFiddle here - 我几周前制作的菜单

用法示例：

#menu > ul > li:hover {
    background: #2580a2;
}

Answer 3

更改代码和css

<ul class="item">
    <li class="list_item">Item 1</li>
    <li class="list_item">Item 2</li>
    <ul>
        <li class="sub_list_item">Sub Item 1</li>
        <li class="sub_list_item">Sub Item 2</li>
    </ul>
    <li class="list_item">Item 3</li>
</ul>

CSS

.item
{
    color: #000000;
    list-style-type: disc;
}

.item li:hover
{
    color: #FFFFFF;
    background-color: #336600;
}

.item ul li:hover
{
    color: #FFFFFF;
    background-color: #FF0000;
}

享受......并随意选择颜色

了解更多细节请访问.. http://www.mr-sudhir.com/blog/what-is-css.aspx

更改div的颜色 - HTML

3 个答案: