Foros del Web - Ver Mensaje Individual - Mostrar un div al activar una caja de texto

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.