Не работает hover на другой блок

Question

Пытаюсь сделать так, чтобы при наведении на текст выводилась подсказка. Но hover не работает конкретно на этот тэг.

.rabota:hover .rezhim {
  visibility: visible;
  opacity: 1;
  transition: .5s;
}

<div class="col-md-3 rz ">
  <p>ул.Кирова, 65<br><span class="rabota">Режим работы</span>
  </p>
  <div class="rezhim">
    <span>пн-пт: 09:00-20:00</span>
    <span>сб: 10:00-15:00</span>
    <span>вс: выходной</span>
  </div>

</div>

Answer 1

Проблема заключается в том, что ваша конструкция .rabota:hover .rezhim пытается найти блок с классом rezhim внутри блока с классом rabota, которого нет, так как он идет следующим в дереве.

Я предложил бы вынести ваш span за пределы p и использовать оператор +, который ищет следующий элемент после .rabota в данном случае.

.rabota:hover + .rezhim {
  visibility: visible;
  opacity: 1;
  transition: .5s;
}

.rezhim {
  visibility: hidden;
  opacity: 0;
}

<div class="col-md-3 rz ">
  <p>ул.Кирова, 65</p>
  <span class="rabota">Режим работы</span>
  <div class="rezhim">
    <span>пн-пт: 09:00-20:00</span>
    <span>сб: 10:00-15:00</span>
    <span>вс: выходной</span>
  </div>

</div>

Answer 2

Ваш код говорит "при наведение на блок .rabota используем правила для вложенного .rezhim", ну внутри .rabota нет никакого .rezhim, он лежит на уровень выше, по этому и не работет.

Как вариант, повесить :hover на элемент p, и брать элемент рядом .rezhim:

.rezhim {
  opacity: 0;
  transition: opacity .5s;
}

.hover:hover ~ .rezhim {
  opacity: 1;
}

<div class="col-md-3 rz ">
  <p class="hover">ул.Кирова, 65<br><span class="rabota">Режим работы</span>
  </p>
  <div class="rezhim">
    <span>пн-пт: 09:00-20:00</span>
    <span>сб: 10:00-15:00</span>
    <span>вс: выходной</span>
  </div>

</div>

Answer 3

Потому что css - это каскад. Правила могут распространяться только сверху вниз: от родителя к детям либо от элемента выше на элемент ниже. А Вы пытаетесь из спана, вложенного в абзац, достучаться до дива, лежащего на другом уровне (на уровень выше).

Задайте class="rabota" абзацу и слегка измените правило в css:

.rezhim {
  opacity: 0;
}
.rabota:hover ~ .rezhim {
  opacity: 1;
  transition: .5s;
}

<div class="col-md-3 rz ">
  <p class="rabota">ул.Кирова, 65<br><span>Режим работы</span>
  </p>
  <div class="rezhim">
    <span>пн-пт: 09:00-20:00</span>
    <span>сб: 10:00-15:00</span>
    <span>вс: выходной</span>
  </div>

</div>

БЛОГ НА HUSL

Не работает hover на другой блок

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