2

Есть список с вложенным в него подсписком. Интересует как с помощью стилей сделать так, чтобы при наведении на только пункт меню с подсписком область подсвечивалась в желтый цвет - именно вся область вместе с самим пунктом! Код и фидл

ul {
  list-style: none;
}
ul.main:hover li.second.current,
ul.main:hover ul {
  background-color: yellow;
}
.second {
  display: inline-block;
  background-color: #000;
  color: white;
}
.second.current {
  background-color: red;
}
<ul class="main">
  <li class="second current">Пункт 1
  <ul>
    <li>Подпункт 1</li>
    <li>Подпункт 2</li>
    <li>Подпункт 3</li>
  </ul></li>
  <li class="second">Пункт 2</li>
  <li class="second">Пункт 3</li>
</ul>
Сейчас при наведении на любой пункт списка область подсвечивается, а нужно только под конкретный пункт

2
  • А что вы хотите получить то? Удалите во втором свойстве ul.main:hover ul, оно же?
    – borodatych
    22 апр 2016 в 12:02
  • @borodatych и что в итоге получится? точно не ответ на вопрос
    – Вася
    22 апр 2016 в 12:03

3 ответа 3

2

Вроде, то что нужно:

ul {
  list-style:none;
}
li.second.current:hover, 
li.second.current:hover + ul
{ background-color: yellow; color: black }
.second {
  display:inline-block;
  background-color:#000;
  color:white;
}
.second.current {
  background-color:red;
}
<ul class="main">
<li class="second current">
  Пункт 1
</li>
<ul class="hovered">
	  <li>Подпункт 1</li>
	  <li>Подпункт 2</li>
	  <li>Подпункт 3</li>
  </ul>
<li class="second">Пункт 2</li>
<li class="second">Пункт 3</li>
</ul>

1
  • что то не работает, не удовлетворяет условиям автора, мой код тоже самое делал. только без изменения DOM дерева 25 апр 2016 в 8:23
2

Если правильно понял то:

Это:

ul.main:hover li.second.current,
ul.main:hover ul {
  background-color: yellow;
}

Поменяй на это. При наведении только на пункт, будет подсвечиваться внутренняя область блока li, а наведя на под список свечение пропадет

li.second.current:hover + ul {
    background-color:yellow;
}

ul {
  list-style: none;
}
li.second.current:hover + ul {
  background-color:yellow;
}
.second {
  display: inline-block;
  background-color: #000;
  color: white;
}
.second.current {
  background-color: red;
}
<ul class="main">
<li class="second current">Пункт 1</li>
  <ul>
  <li>Подпункт 1</li>
  <li>Подпункт 2</li>
  <li>Подпункт 3</li>
  </ul>
<li class="second">Пункт 2</li>
<li class="second">Пункт 3</li>
</ul>

Либо так, если нужно выбирать все:

Изменено так:

li.second.current:hover + ul, ul.hovered:hover { background-color: yellow; }

ul {
  list-style:none;
}
li.second.current:hover + ul, ul.hovered:hover { background-color: yellow; }
.second {
  display:inline-block;
  background-color:#000;
  color:white;
}
.second.current {
  background-color:red;
}
<ul class="main">
<li class="second current">
  Пункт 1
</li>
<ul class="hovered">
	  <li>Подпункт 1</li>
	  <li>Подпункт 2</li>
	  <li>Подпункт 3</li>
  </ul>
<li class="second">Пункт 2</li>
<li class="second">Пункт 3</li>
</ul>

1
0

Как минимум у вас не правильная разметка. Дочернее ul li не лежит внутри родительского li.

Немного изменил разметку (фидл):

ul {
  list-style: none;
}

li.second.current:hover, li.second.current:hover span {
  background-color: yellow;
}

.second span {
  display: inline-block;
  background-color: #000;
  color: white;
}

.second.current > span {
  background-color: red;
}
<ul class="main">
  <li class="second current">
    <span>Пункт 1</span>
    <ul>
      <li>Подпункт 1</li>
      <li>Подпункт 2</li>
      <li>Подпункт 3</li>
    </ul>
  </li>
  <li class="second"><span>Пункт 2</span></li>
  <li class="second"><span>Пункт 3</span></li>
</ul>

3
  • Дак, в комментарии в первом ответе отметили уже...
    – borodatych
    22 апр 2016 в 11:59
  • @dluhhbiu а без span никак? я просил в вопросе стилями.. т.е. без правки html и без скриптов
    – Вася
    22 апр 2016 в 11:59
  • @borodatych простите- а что ответили?
    – Вася
    22 апр 2016 в 12:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.