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

Imágen de perfil

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


CSS

estrellaestrellaestrellaestrellaestrella(11)
Publicado el 27 de Septiembre del 2013 por Xavi
55.420 visualizaciones desde el 27 de Septiembre del 2013. Una media de 336 por semana
Simple ejemplo que muestra como utilizar el estilo :hover para mostrar un div oculto sin utilizar javascript

Versión 1
estrellaestrellaestrellaestrellaestrella(11)

Publicado el 27 de Septiembre del 2013gráfica de visualizaciones de la versión: Versión 1
55.421 visualizaciones desde el 27 de Septiembre del 2013. Una media de 336 por semana
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 (11)

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
08 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

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2495