• 0
7ion

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

Вопрос

Есть <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?

 

Изменено пользователем 7ion

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

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

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

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

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
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. Вроде все :)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас