mostrar/ocultar capas sin javascript

Clandes · #1 (**permalink**) 26/09/2006, 05:11

Hola, llevo un rato probando a ocultar/mostrar capas al pasar el ratón por una capa, pero no me sale, me explico:

Tengo 2 capas, A y B.

Al pasar por la capa A, tendría que hacerse visible la capa B.
Al salir de la capa A, debería desaparecer la capa B.

Creo que hace tiempo lo conseguí hacer, pero no hay manera, alguno me puede poner un ejemplo simple con 2 divs?

Gracias

fearlex · #2 (**permalink**) 26/09/2006, 10:35

Esto fue lo mas cerca que logre, aunque aun no entiendo por que poner invisible los divs en vez de los divs, bueno cada cual sabe lo suyo :D

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">

#style1{
border: 1px solid #000000;
background: #993366;
}

a:hover {
visibility: hidden;
}

#style2{
border: 1px solid #000000;
background: #996633;
}

</style>
</head>
<body>

<div>
<a href="#"><div id="style1">Style 1</div></a>
<a href="#"><div id="style2">Style 2</div></a>
</div>
</body>
</html>

Clandes · #3 (**permalink**) 26/09/2006, 10:59

Un amigo me ha ayudado:

Cita:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#div_b {
visibility: hidden;
background-color:#0000FF;
}

#div_a:hover #div_b { visibility: visible;}

#div_a{
width: 80px;
height: 20px;
background-color:#FF0000;
}
</style>
</head>
<div id="div_a">menu 1
<div id="div_b">opcion 1<br />opción 2</div>
</div>
<body>
</body>
</html>

debian4tw · #4 (**permalink**) 26/09/2006, 11:31

muy bueno clandes , pero no anda en IE 6 :( .
saludos

Clandes · #5 (**permalink**) 26/09/2006, 11:37

Cita:

Iniciado por debian4tw

muy bueno clandes , pero no anda en IE 6 :( .
saludos

Ya, por no ir... no va ni el "ver codigo fuente" en mi web... y no he hecho nada raro... (ni IE 6 ni IE7)

Por suerte el efecto de las capas va en IE7... algo es algo... hay que ver que malo es el jodido.

frijolerou · #6 (**permalink**) 27/09/2006, 11:53

Clandes, lo que pasa es que hasta la versión 6 de Internet Explorer la pseudo-clase :HOVER sólo funciona sobre hipervínculos (es decir sobre elementos <A> que tengan el atributo HREF). Ahora en IE 7 funciona también sobre otro tipo de elementos (aunque no sé si todos).

Clandes · #7 (**permalink**) 27/09/2006, 11:56

Cita:

Iniciado por frijolerou

Clandes, lo que pasa es que hasta la versión 6 de Internet Explorer la pseudo-clase :HOVER sólo funciona sobre hipervínculos (es decir sobre elementos <A> que tengan el atributo HREF). Ahora en IE 7 funciona también sobre otro tipo de elementos (aunque no sé si todos).

En cualquier caso, internet explorer es, y será siendo (en menod grado) una chapuza en su versión 7.

ofnocron · #8 (**permalink**) 19/02/2011, 21:16

Cita:

Iniciado por Clandes

Un amigo me ha ayudado:

este es el bueno!

kseso? · #9 (**permalink**) 20/02/2011, 12:43

ofnocron:
¿Tanta era la necesidad que tenía de hacer semejante "aportación" como para hacer caso omiso a la advertencia de no revivir un tema del 2006?

Yo creo que no. Pero es sólo mi opinión.