Mostrar un div al activar una caja de texto

Gusys · #1 (**permalink**) 10/03/2007, 11:30

Hola, grupo no estoy muy familiarizado con CSS, y espero que ustedes me ayuden como se puede hacer para que se visualize un DIV que estaba oculto al hacer click en una caja de texto por ejemplo en la pagina de hotmail al registrarse como nuevo ususario uno al activar cualquier caja de texto aparece una ayuda en la parte izquierda, tambien cambia el fondo del bloque, como se puede lograr eso con CSS o no se puede, con JavaScript lo he logrado pero sera posible con CSS de antemano muchas gracias y les dejo el link para ver de lo que estoy hablando

Graciass

registro en hotmail

Saludos,

Mikmoro · #2 (**permalink**) 10/03/2007, 18:38

Mira a ver si te sirve este ejemplo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Cajas ocultas</title>
  <style type="text/css">
* {outline: 0;
}
.tip { position: relative;
z-index: 0;
}
.tip:hover { background-color: transparent;
z-index: 1;
}
.tip span { border: 1px solid rgb(255, 102, 0);
padding: 5px;
position: absolute;
text-decoration: none;
background-color: rgb(255, 204, 153);
color: rgb(77, 38, 0);
text-align: center;
width: 100px;
height: 150px;
visibility: hidden;
}
.tip:active span, .tip:focus span { visibility: visible;
top: 0px;
left: 50px;
}
  </style>
</head>
<body>
<br />
<a href="#" class="tip">Pulsa
<span>Caja que se mostrar&aacute; al pulsar el enlace</span>
</a><br />
<br />
<a href="#" class="tip">Pulsa
<span>Caja que se mostrar&aacute; al pulsar el enlace</span>
</a><br />
</body>
</html>

Lo puedes ver funcionando aquí:

http://www.araudi.net/cajas_ocultas.html

Como siempre, funcionará mejor con firefox, porque IE tiene algún problemilla con el :active

Mikel.

Gusys · #3 (**permalink**) 12/03/2007, 08:03

Muchas gracias, por la respuesta voy a poner en practica tu sugerencia, luego te comento como me fue...

Saludos...

Gusys · #4 (**permalink**) 12/03/2007, 16:00

Hola de nuevo, Mikmoro disculpa mi ignorancia pero como puedo implementarlo en una caja de texto no logro hacerlo osea al hacer focus o active a la caja de texto o al list que aparezca el div, gracias otra ves

Saludos...

Mikmoro · #5 (**permalink**) 12/03/2007, 16:06

Con css no lo puedes hacer excepto para elementos de enlace <a href="...>. Bueno, en realidad para firefox podrías hacerlo para cualquier elemento, pero para explorer no, porque explorer sólo acepta pseudo clases tipo :hover, :active, etc., para los elementos de link.

Es una pena pero es así. Maldito sea.

Mikel.

Mikmoro · #6 (**permalink**) 12/03/2007, 16:28

Bueno, siempre se le puede engañar un poco de esta forma:

http://www.araudi.net/cajas_ocultas2.html

Pero como te decía, en explorer no funciona muy bien, porque tiene problemas con el :active.

Mikel.

Gusys · #7 (**permalink**) 12/03/2007, 16:34

ok, muchas gracias lo tomare muy encuenta

Saludos...