1 Тема від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Тема: Як реалізувати показ рівня вкладеності коментів (як на 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 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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

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

3 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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

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

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

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

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

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

4 Відповідь від caballero

  • caballero
  • caballero
  • Користувач
  • Поза форумом
  • Звідки: Харків
  • Дата реєстрації: 25.09.2014
  • Повідомлень: 249
    • Репутація: 111

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

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

caballero вебсайт

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

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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

caballero написав:

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

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

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

6 Відповідь від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

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

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

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

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

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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 Востаннє редагувалося ktretyak (06.07.2015 02:50:47)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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

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

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

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