html - 更改 div 的颜色 - HTML

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>

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

有什么简单的方法可以做到这一点吗？

CSS：

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

Answer 1

Wrap item 2 around its <ul> tag

<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的而不是任何给定的lior 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