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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

 

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


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

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

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

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

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

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

Войти

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

Войти сейчас

  • Статистика пользователей

    46 188
    Всего пользователей
    3 128
    Рекорд онлайна
    Marchysh
    Новый пользователь
    Marchysh
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.