1

se me presenta un problema que no consigo solucionar referente a la aplicacion del :hover para mostrar y ocultar div con display none. Anexo el codigo y describo la siutacion.

<body>
  <header class="site-header contenedor">
    <nav class="menu-area">
      <ul>
        <li><a href="">Menú<span class="arrow">&#x25BC;</span></a>
            <ul class="dropdown-1">
              <li><a href="index.html">Inicio</a></li>
              <li><a href="quienes-somos.html">Quienes Somos</a></li>
              <li><a href="#">Musica</a></li>
              <li><a href="#">Artistas</a></li>
              <li><a href="#">Galeria<span class="arrow">&#x25B6;</span></a>
                  <ul class="dropdown-2">
                    <li><a href="">Fotos</a></li>
                    <li><a href="">Videos</a></li>
                  </ul>
              </li>
              <li><a href="#">Contacto</a></li>
            </ul>
        </li>
        <li><img src="img/logo_vagabundos.png" alt="logo_principal" width="250px" height="80px"></li>
        <li><a href="#">Novedades</a></li>
      </ul>
    </nav><!--Menú de navegación-->
  </header>

  <div class=" contenedor main-background ms">
      <div class="centrar-texto resaltar">
        <h1>MÚSICA</h1>
        <h2 class="fw-300">CONOCE LO QUE TENEMOS PARA TI</h2>
      </div>
  </div>

  <main class="contenedor seccion albumes">
    <div class="lista-albumes">
      <div><img src="img/portadas/portada1.jpg" width="200px" alt="portada_album"></div>
      <div><img src="img/portadas/portada2.jpg" width="200px" alt="portada_album"></div>
      <div><img src="img/portadas/portada3.jpg" width="200px" alt="portada_album"></div>
      <div><img src="img/portadas/portada4.jpg" width="200px" alt="portada_album"></div>
    </div>
    <div class="contenedor-desc">
      <div class="descripcion-album"></div>
    </div>
    <div class="lista-albumes">
      <div><img src="img/portadas/portada5.jpg" width="200px" alt="portada_album"></div>
      <div><img src="img/portadas/portada6.jpg" width="200px" alt="portada_album"></div>
      <div><img src="img/portadas/portada7.jpg" width="200px" alt="portada_album"></div>
      <div><img src="img/portadas/portada8.jpg" width="200px" alt="portada_album"></div>
    </div>
    <div class="contenedor-desc">
      <div class="descripcion-album"></div>
    </div>

  
  

  </main>

En el siguiente código, mediante el uso de css quiero ocultar el div.contenedor-desc y utilizando :hover sobre cualquier elemento de .lista-albumes mostrarlo nuevamente. Intente hacerlo de manera similar a como hice con el menu desplegable pero no me funcionó. Anexo a continuacion el codigo css

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /** Reset para REMS - 62.5% = 10px de 16px (1rem = 16px default)**/
  box-sizing: border-box;
}

*,*:before,*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  background-color: #ffffff;
}
.contenedor {
  width: 95%;
  max-width: 120rem;
  margin: 0 auto;
}
.seccion {
  margin-top: 2rem;
  margin-bottom: 2rem;
  height: 30rem;
}
.centrar-texto {
  text-align: center;
}

main {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
div.main-background {
  height: 100%;
  min-height: 30rem;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}
div.ms {
  background-image: url(../img/musica-background.jpg);
}
div.resaltar {
  background-color: rgba(0,0,0,0.5);
  color: #ffffff;
  width: 100%;
  height: 21rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div.resaltar h1 {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
}


div.resaltar p {
  width: 70%;
  margin: 0 auto;
}

/*Musica*/

main .lista-albumes {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

main .lista-albumes div:hover {
  transform: scale(1.1);
  cursor: pointer;
  transition: 0.4s;
  border: solid 0.5rem #ff6347;
}

.contenedor-desc {
  display: none;
}

main .lista-albumes div:hover main > .contenedor-desc {
  display: flex;
  justify-content: center;
  align-items: center;
}

main .descripcion-album {
  height: 25rem;
  border: solid 0.5rem #ff6347;
  background-color: rgba(0,0,0,0.8);
  border-radius: 1rem;
  width: 70%;
}

Dejo todo el codigo necesario. Estoy atento para cualquier posible solucion que pueda solucionar mi problema. Agradezco un monton

1
  • Excelentes respuestas. Ayuda increible el 19 feb. 2021 a las 18:04

2 respuestas 2

1

Hay que tener en cuenta que en CSS solamente puedes interactuar o con hijos de un elemento o con hermanos posteriores, nunca con ancestros de un elemento o con sus hermanos anteriores.

Clarificado esto, podemos hacer algo para interactuar entre .lista-albumes y .contenedor-desc ya que son elementos hermanos y el queremos afectar a un hermano posterior al elemento que recibe el hover. Para ello usamos el selector +, que sirve para afectar al hermano inmediatamente posterior a un elemento, provocando que cada .lista-albumes tan solo afecte al .contenedor-desc que le corresponde.

.contenedor-desc {
  color: red;
  font-size: 2rem;
  margin: 10px 0;
  display: none;
}

.lista-albumes:hover + .contenedor-desc {
  display: block;
}
<main class="contenedor seccion albumes">
  <div class="lista-albumes">
    <div><img src="img/portadas/portada1.jpg" width="200px" alt="portada_album"></div>
    <div><img src="img/portadas/portada2.jpg" width="200px" alt="portada_album"></div>
    <div><img src="img/portadas/portada3.jpg" width="200px" alt="portada_album"></div>
    <div><img src="img/portadas/portada4.jpg" width="200px" alt="portada_album"></div>
  </div>
  <div class="contenedor-desc">
    <div class="descripcion-album">Descripción 1</div>
  </div>
  <div class="lista-albumes">
    <div><img src="img/portadas/portada5.jpg" width="200px" alt="portada_album"></div>
    <div><img src="img/portadas/portada6.jpg" width="200px" alt="portada_album"></div>
    <div><img src="img/portadas/portada7.jpg" width="200px" alt="portada_album"></div>
    <div><img src="img/portadas/portada8.jpg" width="200px" alt="portada_album"></div>
  </div>
  <div class="contenedor-desc">
    <div class="descripcion-album">Descripción 2</div>
  </div>
</main>

1
  • Vaya! no sabia que con + eso era posible, muy buena respuesta. el 18 feb. 2021 a las 17:29
0

Lastimosamente la única forma de afectar a otro elemento mediante la acción hover es si este elemento esta dentro del elemento principal, es decir, si contenedor-desc estuviese dentro de lista-albumes, entonces podrías hacer algo como esto.

.lista-albumes:hover > .contenedor-desc {
     display:block;
}

Otra forma seria mediante jQuery usando toggleClass y hover, esto no requiere que contenedor-desc este dentro de lista-albumes:

$(".lista-albumes").hover(function(){
  $(".contenedor-desc").toggleClass("show");
});

En tus CSS

.show {
  display: block!important;
}

Esto requiere agregar el script de jQuery en tu header

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.