@Tapuz

Как скрыть/показать элемент на сайте?

На сайте https://israway.com/tal/ пытаюсь с помощью css показать при наведении меню, которое расположено на правой картинке под хедером. При наведении на картинку появляется fade эффект и нужно чтобы на синем фоне появлялось меню. Пробовал такой код, но никак не помогает
.menu-sub-menu-1-container {
    text-align: right;
    padding-right: 20px;
    font-size: 18px;
    display: none;
}
.pagelayer-text-holder:hover + .menu-sub-menu-1-container {
    display: block;
}


Сейчас меню видно для наглядности. Подскажите что делаю не так?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
RomanTRS
@RomanTRS
Fade-эффект – это opacity, а никак не display, которое вообще-то не анимируется.
К то му же, меню должно выпадать из потока, чтобы не сдвигать содержимое при появлении. Для этого используется свойство position.

update:
Кажется я понял, что вы имели ввиду.
Hover, надо назначать всему контейнеру, а не соседнему элементу.
Иначе, при смене положения курсора, состояние hover будет переходить на другой элемент. Соответственно ваш стиль перестанет работать и меню будет опять скрыто.

Сделайте так:
.pagelayer-col-holder:hover > .pagelayer-wp_nav_menu {
  opacity: 1;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы