1

Тема: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

Я вже в себе реалізував за допомогою JavaScript+CSS показ рівня вкладеності коментарів при наведені (:hover) як habrahabr.ru, але схоже на хабрі це зроблено без використання JavaScript (бо я не бачу динамічних змін DOM при наведенні).

Ніхто не в курсі як це зробити на чистому CSS?

В мене реалізована вкладеність в ненумерованих списках

<ul>
  <li>
    <ul>
      <li>
      ...
      <li>
      <li></li>
      <li></li>
      <li></li>
    <ul>
  </li>
  <li></li>
  <li></li>
  <li></li>
</ul>

2

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

А, забув дописати - показується не просто рівень вкладеності, а й відповідний рівень біля всіх батьківських елементів поточного коментаря.

3

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

Що я зробив на даний момент, та що в мене не виходить зробити.

На скріні червоними стрілочками показано ті індикатори, які мені треба реалізувати на чистому CSS.

Як це зроблено зараз: кожен коментар має катринку-цяточку в прихованому background, яка показується за допомогою JavaScript при наведенні (подія mouseenter) і зникає, коли забирають мишку (подія mouseleave). І оскільки коментарі вкладені відповідно до їх ієрархії, то і виникає потрібний ефект, коли видно хто кого цитує.

На чистому CSS я намагався так само зробити, але я не знаю як можна background змістити ліворуч. Просте вказування від'ємних значень при позиціонуванні не допомогло.

https://1933a544b9b651d3813e8de397efcd5a179e17e8.googledrive.com/host/0Bwk9euTxkxYUOFFUS29tSGJ4eXM/replace.org.ua/img/comments-level.png

4

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

навіщо  там  нумерований  список і якісь бакраунди?   Звичайний  div  який  зсуваєтся   вправо  відповідно  глибини  вкладення

Путлер капут!

5 Востаннє редагувалося ktretyak (05.07.2015 14:26:11)

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

caballero написав:

навіщо  там  нумерований  список і якісь бакраунди?   Звичайний  div  який  зсуваєтся   вправо  відповідно  глибини  вкладення

Там абсолютне позиціонування background, причому воно не залежить від рівня вкладеності.

Але питання в іншому. Як показувати ці індикатори лише при наведенні, але без JavaScript (бо не сильно то й важлива функціональність, через яку до кожного комента треба чіпляти обробники подій).

6

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

Але питання в іншому. Як показувати ці індикатори лише при наведенні, але без JavaScript (бо не сильно то й важлива функціональність, через яку до кожного комента треба чіпляти обробники подій).

.className .dotted {
 visibility: hidden;
}
.className:hover .dotted{
 visibility: visible;
}
Подякували: ktretyak1

7 Востаннє редагувалося ktretyak (06.07.2015 03:27:15)

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

Дякую, ailkiv, вже дуже близько, але при наведені на блок із класом className, показується клас dotted абсолютно у всіх нащадках цього блока. Я спробував використати first-child, але щось не спрацювало.

.className .dotted {
 display: none;
}
.className:hover .dotted:first-child{
 display: block;
}

Ось живий приклад http://codepen.io/ktretyak/pen/BNrKoq

8 Востаннє редагувалося ktretyak (06.07.2015 03:50:47)

Re: Як реалізувати показ рівня вкладеності коментів (як на habrahabr.ru)?

Нарешті http://codepen.io/ktretyak/pen/qdoZNm

Мені треба було указати перший вкладений елемент

.className .dotted {
 display: none;
}
.className:hover>li>.dotted{
 display: block;
}