Jump to content
  • 0

Верстка многоуровневого списка


xbreaker
 Share

Question

Извиняюсь, если вопрос такой был, поиском пользовался, честно :-).

Есть список вида:


<ul class="parent">
<li class="first"></li>
<li class="second">
<ul class="child">
<li class="first-child"></li>
<li class="second-child"></li>
</ul>
</li>
<li class="third">
<ul class="child">
<li class="fourth-child"></li>
<li class="fifth-child"></li>
</ul>
</li>
<li class="fourth"></li>
<li class="fifth"></li>
</ul>

Как правильно написать селектор, чтобы при наведении на second-child менялся фон не только у second-child, но и у first-child? Это же правило должно работать, если second-child будет иметь потомков в виде нового списка UL, тогда наведение на одного из потомков должно выделять и second-child и first-child. Через JS такое написать не трудно, но можно ли реализовать такое средствами CSS 3?

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Ээээ....


.second .child:hover {

}
/* или */
.second .child:hover li {

}

Не?

Вроде об этих чайлдах речь. Наводим на second-child, реагирует first-child

 <li class="first-child"></li>
<li class="second-child"></li>

Тут можно на ховере показывать псевдоэлемент у second-child'a, но тогда надо смотреть ситуацию с размерами и прочим окружающим оформлением.

Link to comment
Share on other sites

  • 0

Вроде об этих чайлдах речь. Наводим на second-child, реагирует first-child

 <li class="first-child"></li>
<li class="second-child"></li>

Ну так и я про них. Если при ховере на один из дочерних элементов должны меняться стили для всех дочерних, то почему бы это не разрулить через родителя...

http://jsfiddle.net/DtEPv/

Link to comment
Share on other sites

  • 0

Вроде об этих чайлдах речь. Наводим на second-child, реагирует first-child

 <li class="first-child"></li>
<li class="second-child"></li>

Ну так и я про них. Если при ховере на один из дочерних элементов должны меняться стили для всех дочерних, то почему бы это не разрулить через родителя...

http://jsfiddle.net/DtEPv/

Не, может оно так и есть, я не спорю. Но в этом случае если наводить на first-child, то также светится и second-child, т.е. все потомки. Если это устраивает, то да.

Link to comment
Share on other sites

  • 0

Исходя из предложенного кода ТС - second-child не является потомком first-child, а является соседним элементом, так что не получится через наследование сделать. Тем более, что ТС нужно чтобы при наведении на второй, добавлялись стили для первого, если я правильно понял. В этом случае получается последовательность наоборот, а в этом случае нужен js.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy