para - mostrar y ocultar texto en html

mostrar/ocultar contenido cuando el menú emergente no funciona

Question

No puedo trabajar esto. Quiero pasar el elemento del menú, y cuando lo coloco muestra la clase de la galería.

Lo puse .gallery class display: none; y .main_menu ul li a: hover + .gallery

debería cambiar la visualización de la galería para bloquear, pero simplemente no aparece;)

HTML para el menú y la galería

<div class="main_menu">
<ul>
   <li><a href="#" class="shop">shop</a></li>
   <li><a href="#">collections </a></li>
   <li><a href="#">gifts</a></li>
   <li><a href="#">moodboard</a></li>
   <li><a href="#">blog</a></li>
</ul><br />
</div>

<!--gallery hover-->
<div class="gallery">
    <div class="item1">
    <img src="images/item_1.png" width="166" height="129" class="item_1" alt="*" />
    <div class="description">
    <span>Artwork</span>
    </div>
</div>
<div class="item2">
   <img src="images/item_2.png" width="166" height="129" class="item_1" alt="*" />
<div class="description">
    <span>Bedding</span>
</div>
 </div>

CSS

.gallery{
    position:absolute;
    top: 110px;
    left:0px;
    background-color: #f4f4f4;
    width: 980px;
    min-height: 300px;
    z-index: 3;
    padding: 20px 10px 20px 10px;
    display: none;
}

.main_menu ul li a:hover + .gallery {
    display: block;
}

Answer 1

Para una pseudo-clase de hover usa > como tal.

.main_menu ui li a:hover > .gallery

Answer 2

a: hover + .gallery significa .gallery tiene que ser hermano de lo que no es el caso en su html.

más bien use jquery para manejar mouseenter y mouseleave events para mostrar / ocultar .gallery

$(function(){
    $(".main_menu ul li > a")
    .on("mouseenter", function(){
        $(".gallery").show();
    })
    .on("mouseleave", function(){
        $(".gallery").hide();
    });
});

Este es un código de muestra para manejar el comportamiento de vuelo estacionario. modifíquelo para mostrar el elemento que desee en función del elemento del menú desplazado.

Answer 3

+ .gallery es un selector de hermanos, por lo que el elemento .gallery tendrá que ser un elemento hermano del elemento con el selector :hover .

Deberá cambiar la ubicación de .gallery o cambiar qué elemento activará el: hover.

Linked es un violín de demostración que muestra un par de opciones.

En el primero, <div class="gallery"> ha sido movido para ser un hermano de la primera etiqueta de anclaje con la clase .shop .

En el segundo ejemplo, el selector se ha cambiado a: .main_menu2:hover + .gallery2 para que cualquier .main_menu2:hover + .gallery2 sobre todo el menú active la visualización de .gallery2 .

Con suerte, esto le dará una mejor idea de cómo funciona el selector de hermanos con :hover y puede ajustarlo a algo que funcione para sus necesidades.