Código de CSS - Mostrar y ocultar un elemento utilizando el evento hover de CSS

Imágen de perfil
Val: 672
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Mostrar y ocultar un elemento utilizando el evento hover de CSSgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(17)
Publicado el 27 de Septiembre del 2013 por Xavi
104.371 visualizaciones desde el 27 de Septiembre del 2013
Simple ejemplo que muestra como utilizar el estilo :hover para mostrar un div oculto sin utilizar javascript

Versión 1
estrellaestrellaestrellaestrellaestrella(17)

Publicado el 27 de Septiembre del 2013gráfica de visualizaciones de la versión: Versión 1
104.373 visualizaciones desde el 27 de Septiembre del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<style>
	.primero,.segundo {
		display:none;
		padding:5px;
		border:1px solid #ccc;
		background-color:#f1f1f1;
		position:relative;
		width:200px;
	}
	#segundo {
		position:absolute;
		top:100px;
	}
	/* Al pasar el mouse por encima del div mostramos el div con la
		clase ".primero". Esta clase, tiene que estar dentro del id
		"primero" para que pueda funcionar
	 */
	#primero:hover .primero {
		display:block;
	}
	#segundo:hover .segundo {
		display:block;
	}
	</style>
</head>
 
<body>
	<ul>
		<li id="primero">mostrar el primer div oculto
			<div class="primero">Contenido del primer div</div>
		</li>
		<li id="segundo">mostrar el segundo div oculto
			<div class="segundo">Contenido del segundo div</div>
		</li>
	</ul>
</body>
</html>



Comentarios sobre la versión: Versión 1 (17)

Ivan
11 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
Impresionante, muchas gracias. Lo uso para ocultar lo de la protección de datos en los correos, así al imprimir no salen tropecientas hojas.
De lujo el que no use javascript o similar, así los programas de correo no lo bloquean.
Responder
Tsvetelina
20 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
Hola, muchas gracias por la ayuda.¿ Sabrías decirme como hacer que al pasar por encima el ratón la parte oculta se quede mostrada y se oculte cuando se vuelva a pasar encima y no se cierre automáticamente?
Responder
hola
16 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
pudiste resolver esto ? lo necesito ...jeje
Responder
PACO DE LA TORRE
12 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
muchas gracias por la informacion

como se puede hacer para que cuando pase el mouse en una lista de texto en otro div se vayan cambiando las imagenes?

ojala me puedas ayudar
Responder
Ruben
22 de Abril del 2015
estrellaestrellaestrellaestrellaestrella
Buenísimo, muchas gracias!
Responder
alexander martinez
8 de Junio del 2015
estrellaestrellaestrellaestrellaestrella
muy sencillo y practico, gracias por la ayuda...
Responder
Daniel Gomez
22 de Julio del 2015
estrellaestrellaestrellaestrellaestrella
Excelente, eficaz y sencillo. Muchas gracias máster!
Responder
Moisés
27 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
Muy bueno! Rápido, sencillo y eficaz! Me sirvió mucho :)
Responder
Jose Antonio
29 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
Muchas gracias, me sirvió de ayuda.
Responder
Roy
12 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Muy bueno voy a provarlo, en la pagina www.fractalescr.com
Responder
juan
16 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
genial.. mil gracias.. funciona de maravilla hacia rato que estaba buscando esto
Responder
Imágen de perfil
13 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
Muy bueno, muy, útil, muy compatible....

Gracias, lo tendré a mano.
Responder
Yosmangel Adames
10 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
Excelente!
Responder
Fazzil
12 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
Excelente, muchas gracias, lo he implementado en mi web <a href="https://www.fazzil.com.py/categoria/audio-y-video">seccion de audio con Bluetooth</a>
Responder
Jean
11 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
Muchas gracias
Responder
Adria
30 de Diciembre del 2018
estrellaestrellaestrellaestrellaestrella
Es muy bueno, pero yo tengo una duda, como mostrar un div (1er div) al hacee hover a un div (2do div) y ocultar un div (1er div) al hacer click al mismo div (2do div).
TODO ESTO CON CSS SIN USAR JQUERY
Responder
Imágen de perfil
20 de Agosto del 2019
estrellaestrellaestrellaestrellaestrella
Gracias!!! Que Dios le(s) bendiga y le siga ayudando a descubrir los misterios de la programación para que ayuden a otros... "La gloria está en ser grande y en ser útil" Simón Bolívar
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2495