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.