0

Всем привет. Не могу сообразить почему не изменяется стиль второго элемента при 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>

1

2 ответа 2

3

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

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

.info:hover .info_block

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

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

2
  • Добавил css-решение для этого конкретного примера. 3 авг 2021 в 11:50
  • @AlexeyVladimirov, как обходной путь пойдет, до момента, пока hover не понадобится самому h4 ¯\_(ツ)_/¯
    – Grundy
    3 авг 2021 в 12:08
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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.