Почему не изменяются стили второго элемента при наведении на первый элемент?

Question

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

.info_block{
    opacity: 0;
    position: absolute;
    text-align: left;
    padding: 10px;
    font-size: .85em;
    background: rgba(45, 5, 113, 0.8);
    color: white;
}
.info{
    cursor: help;
}
   .info:hover .info_block{
   opacity: 1;
}

  <h4>Информация <i class="far fa-question-circle info">111</i></h4>
    <div>
       <div class="info_block">
           <i class="fas fa-info-circle mr-1"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       </div>
    </div>

Answer 1

При указании селекторов через пробел, элемент будет искаться внутри.

Таким образом, селектор

.info:hover .info_block

выберет элементы .info_block, которые находятся внутри элемента с классом .info. Так как в разметке .info_block находится в другом элементе - стили и не применяются.

Для указанной разметки невозможно связать данные элементы стилями только с помощью css. Нужно использовать javascript и события mouseenter, mouseleave для ручной реализации :hover

Answer 2

Enjoy!

.info_block{
    opacity: 0;
    position: absolute;
    text-align: left;
    padding: 10px;
    font-size: .85em;
    background: rgba(45, 5, 113, 0.8);
    color: white;
}

h4 {
  pointer-events: none;
}
.info{
    cursor: help;
    pointer-events:auto;
}

h4:hover + div > .info_block {
   opacity: 1;
}

<h4>Информация <i class="far fa-question-circle info">111</i></h4>
    <div>
       <div class="info_block">
           <i class="fas fa-info-circle mr-1"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       </div>
    </div>

P.S. В данном примере разметки предлагаю вешать :hover не на вложенный элемент, а на весь заголовок целиком, но отменить все действия мыши (pointer-events) над ним. Для вложенного элемента .info возвращаем pointer-events — в результате :hover сработает только над ним, и у нас останется возможность использовать соседний селектор (+): h4:hover + div > .info_block

БЛОГ НА HUSL

Почему не изменяются стили второго элемента при наведении на первый элемент?

Ответы (2 шт):