:hover протекает внутрь дочернего, как починить?

[7ion]

Есть <span class="hider">. По :hover он должен показывать свое содержимое. Он может быть вложен в себя на любой глубине.

Демо: https://jsfiddle.net/kzosd0wp/3

Проблема: когда срабатывает :hover на корневом .hider, все .hider на всю глубину показывают теги <a>, но не должны.
Требуемое поведение: по :hover .hider показывает только свое содержимое и родительских hider, но не содержимое вложенных в него .hider.

Сейчас при наведении курсора на внешний hider показывается лишняя ссылка, но не должна. Ее должно быть видно только при наведении на дочерний .hider. 

Селектор

 .hider:hover > a 

не выход, т.к. внутри .hider ссылка может быть обернута во что угодно (или нет).

Куда добавить специфичности, чтобы link2 реагировал на :hover только своего .hider?

 

Edited December 15, 2018 by 7ion

[7ion]

Господа, решение должно работать именно с версткой из примера. Без 

5 часов назад, npofopr сказал:

оборачивать во что угодно не надо

3 часа назад, VeniVidiVici сказал:

придётся добавить ещё один контейнер

Было бы так просто - я бы не спрашивал :)

Нашел решение.

https://jsfiddle.net/kzosd0wp/5/

[npofopr]

Посмотрите как это делают крупные и не очень фреймворки. 

`>` — как раз таки выход. 

И оборачивать во что угодно не надо. 

Иногда не надо придумывать для себя сложности там, где их не должно быть.

[VeniVidiVici]

Мне кажется или вы сами себя запутали? Зачем привязывать скрытие элемента к конкретному цвету фона?

Выставляем нужные стили на отдельный класс контейнера, а hider просто задаём стили для скрытия. При этом избавились от лишнего каскадирования.

В идеале конечно нужно выставлять visibility, но тогда в hider придётся добавить ещё один контейнер. 

[AlexZaw]

15.12.2018 в 18:03, 7ion сказал:

Нашел решение.

А вот так не проще?

<span class="hider">
  Я родительский hider.
  <a href="http://google.com">Эту ссылку должно быть видно.</a> 
  Я продолжение родительского hider.
    <span class="hider">
      Я дочерний hider.
        <a href="http://google.com" class="bold">Меня не должно быть видно при наведении курсора на родителя.</a>
        Я дочерний hider.

    </span>
  Я продолжение родительского hider.
</span>

.hider {
  background-color: gray;
  padding: 7px;
  line-height: 1.5em;
}
.hider, .hider a{
    color: transparent;

}
.bold{
  font-weight: bold;
}
.hider:hover{
 color: #000;
}
.hider:hover > a {
  color:blue
}

Плюсы:

1. Работает во всех браузерах
2. Со 100% вероятностью будет использован нужный цвет, а не цвет по умолчанию или цвет родителя.

Минусы:

1. Чуть увеличивается код.
2. Вроде все :)