Матч CSS, пока не будет найдено другое совпадение

0

То, что я пытаюсь выполнить, - это общий способ сделать что-то видимым только тогда, когда на него наводится родитель. Здесь jsfiddle: http://jsfiddle.net/8kRsG/1/

Разметка здесь:

<div class="hover-parent">
    <div class="container">
        Hello world!
        <div class="hover-only">
            <h1>You're hovering container 1</h1>
        </div>
        <div class="hover-parent">
            <div class="container-2">
                <div class="hover-only">
                    <h2>You're Hovering container 2</h2>
                </div>
            </div>
        </div>
    </div>
</div>

CSS здесь:

.hover-parent:hover .hover-only {
    opacity: 1;
}
.hover-only {
    opacity: 0;
    transition: opacity 0.3s;
}

Таким образом, это довольно просто, и это работает, если вы не hover-parent в другой hover-parent hover-only вложенные hover-only показуются, даже если его прямой родитель не завис.

Итак, чтобы подвести итог, я хочу, чтобы You're Hovering container 2 " You're Hovering container 2 отображался только тогда, когда я наводил курсор на container-2 а не когда я парил над container. Это возможно только с помощью CSS (как, например, без JavaScript/jQuery/etc. И не зависит от того, как структурируется html).

  • 2
    Я думаю, что вам лучше использовать другой класс для вложенных элементов.
  • 0
    @adeneo, хорошая идея. В любом случае, я использую стилус, поэтому мне не нужно копировать / вставлять кучу CSS. Я думаю, что у меня будут пары hover-parent-<number> и hover-only-<number> . Это будет работать очень хорошо. Если вы хотите ответить, я бы это принял. Спасибо!
Показать ещё 1 комментарий
Теги:
hover

4 ответа

0
Лучший ответ

Это невозможно в CSS без какой-либо зависимости от структуры DOM. Так что я закончил делать следующее:

Поскольку я использую Stylus, я смог это сделать:

for layer in 1 .. 10
  .hover-parent-{layer}
    .hover-only-{layer}
      opacity 0
      transition opacity 0.2s
    &:hover
      .hover-only-{layer}
        opacity 1

Это приводит к следующему CSS

.hover-parent-1 .hover-only-1 {
  opacity: 0;
  transition: opacity .2s;
}

.hover-parent-1:hover .hover-only-1 {
  opacity: 1;
}

.hover-parent-2 .hover-only-2 {
  opacity: 0;
  transition: opacity .2s;
}

.hover-parent-2:hover .hover-only-2 {
  opacity: 1;
}

/* etc... */

И тогда я могу просто сделать:

<div class="hover-parent-1">
  <h1 class="hover-only-1">This is container 1</h1>
  <div class="container hover-parent-2">
    <h2>This will always show up</h2>
    <div class="container">
      <div class="as-many-as-i-want">
        <i class="icon-awesome hover-only-2"></i>
      </div>
    </div>
  </div>
</div>
Поделиться
3

прямой селектор потомков

.hover-parent:hover > div > .hover-only {
    opacity: 1;
}

Примечание. Предполагается, что у вас есть ровно один уровень <div> между hover-parent и hover-parent hover-only поэтому вам может потребоваться настроить его, если это недействительно

Поделиться
  • 1
    +1, потому что это способ сделать это, и я не понимаю, почему кто-то отказался от этого.
  • 2
    Это работает, но теперь это не совсем «общий способ» сделать это больше, поскольку это очень зависит от разметки
Показать ещё 1 комментарий
3

Для неограниченного гнезда родитель-паук, "общий путь" и независимый по разметке, лучше используйте это

[class^=hover-parent]:hover  > [class^=container] >.hover-only {
    opacity: 1;
}

JSFIDDLE DEMO

добавление ребенка

<div class="hover-parent">
    <div class="container">
        Hello world!
        <div class="hover-only first">
            <h1>You're hovering container 1</h1>
        </div>
        <div class="hover-parent">
            <div class="container-2">
                <div class="hover-only second">
                    <h2>You're Hovering container 2</h2>
                </div>
                      <div class="hover-parent">
                           <div class="container-3">
                              <div class="hover-only third">
                              <h2>You're Hovering container 3</h2>
                           </div>
                      </div>
                 </div>
            </div>
        </div>
    </div>
</div>

JSFIDDLE DEMO 2

ОБНОВЛЕНИЕ: используйте универсальный селектор, основанный на том, что вы хотите достичь

[class^=hover-parent]:hover  > [class^=container] >.hover-only,
[class^=hover-parent]:hover  > [class^=container]  >*  >.hover-only{
    opacity: 1;
}

JSFIDDLE DEMO 3

Поделиться
  • 0
    Вау, невероятно! Я уверен, что это будет работать для меня! Для меня может потребоваться наличие hover-parent с hover-parent внутри другого hover-only . Это возможно?
  • 0
    да, это просто разместить скрипку вашей разметки, я сделаю CSS в зависимости от ваших потребностей
Показать ещё 5 комментариев
0

Ответ Стивена правильный. Если вы все еще не знаете, как подойти к нему, попробуйте эту скрипку.

Если он все еще не работает для вас, просто убедитесь, что вы выбрали весь путь вниз.

.activate-hover:hover > .show-on-hover {
    opacity: 1;
}

Кроме того, это может быть функция вашего HTML, не структурированная таким образом, который имеет смысл для ваших правил стиля.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню