Изменение цвета div - HTML

Question

Изменение цвета div - HTML

0

У меня есть выпадающее меню с подменю, состоящее из списков:

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

Kurai Bankusu 21 окт. 2013, в 22:35

Источник

6

Пожалуйста, покажите свой CSS.
Diodeus - James MacFarlane 21 окт. 2013, в 19:55
1

Ваш CSS не совпадающий ваш HTML - нет тегов в вашем HTML. a
fbitterlich 21 окт. 2013, в 20:00
0

Есть и извиняюсь, я просто ленивый
Kurai Bankusu 21 окт. 2013, в 20:02
0

Ваше подменю не является дочерним по отношению к одному из пунктов главного меню.
codedude 21 окт. 2013, в 20:10

Показать ещё 2 комментария

Теги:

html

css

colors

3 ответа

Ещё вопросы

Ваш CSS не совпадающий ваш HTML - нет тегов в вашем HTML. a
Есть и извиняюсь, я просто ленивый
Ваше подменю не является дочерним по отношению к одному из пунктов главного меню.

roasstbeef · Answer 1 · 2013-10-21T18-32-00.000Z

Оберните элемент 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>

Josh Crozier · Answer 2 · 2013-10-21T17-28-00.000Z

Вы можете использовать непосредственный дочерний селектор > для таргетинга определенного li в противоположность любым данным li или ul.

jsFiddle здесь - меню, которое я сделал несколько недель назад

Пример использования:

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

mr-sudhir · Answer 3 · 2013-10-21T18-07-00.000Z

Измените код и 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