ventana emergente con hover

rpairo · #1 (**permalink**) 21/01/2012, 13:15

Como podría hacer que un div, al recibir un mover, desplegara una nueva ventana con css? no puedo usar javascript, es para una pantalla táctil, por lo que tengo el problema que al abrir un hover al tocarlo con el dedo, al levantarlo para elegir una nueva opción, desaparecería el hover..

como podría hacer que apareceieran nuevos divs al hacer un mover? como los oculto para que aparezcan al hacer un nuevo hover?

cristian_cena · #2 (**permalink**) 21/01/2012, 14:44

En este ejemplo hacen aparecer una caja de texto a través de un hover, solo con css.

Fijate que lo hacen así:

Código CSS:

Ver originalCopiarul.notas li:hover p { /* ... estilos ... */ }

Notarás como "p" le sigue a "li:hover".

Espero te sea útil.
Chau.

pd/ si lo que querías era un lightbox, acá hay uno echo solo con css3, ie8+

emprear · #3 (**permalink**) 21/01/2012, 15:00

En primer lugar, bienvenido.... @rpairo

Como es la cosa, hacer un hover ó hacer un mover?, pensé que era un error de tipeo, pero como repetís eso de "mover" 2 veces, me queda la duda.

Bueno, supongo que es hover, hace poco hice una página que usaba algo mas o menos similar
http://emprear.com.ar/competencia2011/
Tenés que verla con Firefox o Chrome, si esperás a que aparezca el texto "que le regalamos a Papa noel", vas a ver que hay tres opciones, que al hacerles hover, muestran un contenido que por defecto está oculto, una versión simplificada (que podés ver con cualquier navegador)sería

Código HTML:

Ver originalCopiar<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<style type="text/css">
/*<![CDATA[*/
figure.regalo_oculto_uno, figure.regalo_oculto_dos, figure.regalo_oculto_tres{
display: none;
}
 
div.regalo_oculto_uno:hover figure.regalo_oculto_uno{
display:block;
}
 
div.regalo_oculto_dos:hover figure.regalo_oculto_dos{
display:block;
}
 
div.regalo_oculto_tres:hover figure.regalo_oculto_tres{
display:block;
}
 
figcaption{
text-align: center;
}
/*]]>*/
</style>
</head>
<body>
 
<div class="regalo_oculto_uno">Que les parece esto?<br />
<figure  class="regalo_oculto_uno"><a href="smart-un-regalo-para-santa" class="cand">aqui va algo oculto</a>    
</figure>   
</div>
<div class="regalo_oculto_dos">O tal vez esto?<br />
<figure  class="regalo_oculto_dos"><a href="amianto-un-regalo-para-santa" class="cand">aqui va algo oculto</a>  
</figure>   
</div>
<div class="regalo_oculto_tres">Y por qué no esto?<br />
<figure  class="regalo_oculto_tres"><a href="carro-un-regalo-para-santa" class="cand" >aqui va algo oculto</a>
</figure>   
</div>
 
</body>
</html>

Y no se usa JavaScript

SAludos

rpairo · #4 (**permalink**) 21/01/2012, 16:38

muchas gracias :)

era hover, jaja que el corrector me ponia mover