Sitio web de resúmenes de películas - Conocimientos de interpretación musical - div css jquery muestra contenido oculto cuando el mouse pasa sobre él ~ ¡solución!

div css jquery muestra contenido oculto cuando el mouse pasa sobre él ~ ¡solución!

Si no necesitas efectos especiales como degradados, puedes conseguirlos mediante CSS. Supongamos que tanto las imágenes como el texto son selectores de ID, el nombre del selector de imágenes es a y el nombre del selector de texto es b. El código relevante es el siguiente (se supone que el ancho de la imagen es 100 px * 100 px):

Código CSS:

p>

#a{

padding-top: 1px

fondo: url('0.jpg'); imágenes relacionadas según requisitos específicos*/

ancho: 100px;

alto: 100px

}

#b{

display: none ;

}

#a:hover #b{

display: block

width; : 100px;

altura: 30px;

opacidad: 0.8 /*Algunos navegadores no admiten este atributo y la transparencia se puede lograr cargando una imagen png transparente en la imagen de fondo. */

fondo: #ccc; /*El color se puede configurar específicamente*/

margin-top: 70px /*El tamaño restante para #a visualización de imagen se establece aquí; según la situación específica*/

text -align: center;

line-height: 30px; /* Centrar el texto verticalmente*/

}

Código HTML:

lt;divgt;

lt;div id="a"gt;

lt;div id=" b"gt;texto absoluto

lt ;/divgt;

lt;/divgt;