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

Question

[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;
}

Сейчас меню видно для наглядности. Подскажите что делаю не так?

Answer 1

[Роман]

Fade-эффект – это opacity, а никак не display, которое вообще-то не анимируется.
К то му же, меню должно выпадать из потока, чтобы не сдвигать содержимое при появлении. Для этого используется свойство position.

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

Сделайте так:

.pagelayer-col-holder:hover > .pagelayer-wp_nav_menu {
  opacity: 1;
}

Comments

[Tapuz]

Так вопрос не про эффект, а про скрытие-появление блока меню, без эффекта.