7ion

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
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. Вроде все :)

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,331
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.