Saltar al contenido

Mostrar imagen en enlace de texto Hover CSS solamente

Te damos la bienvenida a nuestra comunidad, ahora encontrarás la resolución a lo que andabas buscando.

Solución:

Se puede hacer usando CSS solo. Funciona perfectamente en mi máquina en el navegador Firefox, Chrome y Opera bajo Ubuntu 12.04.

CSS:

.hover_img a  position:relative; 
.hover_img a span  position:absolute; display:none; z-index:99; 
.hover_img a:hover span  display:block; 

HTML:

Show Imageimagen

CSS no podrá llamar a otros elementos como ese, necesitará usar JavaScript para llegar más allá de un selector de niños o hermanos.

Podrías probar algo como esto:

Some Link

entonces…

a>div  display: none; 
a:hover>div  display: block; 

Hice algo como eso:

HTML:

text text text

CSS:

.child 
    visibility: hidden;


.parent:hover .child 
    visibility: visible;

Si te gustó nuestro trabajo, tienes la habilidad dejar una sección acerca de qué le añadirías a esta crónica.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *