[css] Afficher un div lors du passage de la souris sur un autre

par **Duche** Mer 8 Avr 2009 - 13:21

Voila une petite astuce que je viens de découvrir, du moins, je viens d'avoir ma réponse alors que je cherchais depuis longtemps.

Voyons tout d'abord le résultat : http://www.sankara.be/temporaire/test.html

Et voici le code pour faire ça:

HTML:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" /> </head> <body> <div id="un"> Passez votre souris sur ce cadre. </div> <div id="deux"> Surprise! </div> </body> </html>

CSS:

Code:: div#un { position: absolute; top: 100px; left: 200px; padding: 50px; border: solid 2px #9040C0; cursor: default; } div#un:hover { background-color: #E0E0E0; border: solid 2px #30B0A0; } div#deux { position: absolute; top: 400px; left: 700px; padding: 30px; border: dashed 1px #005040; background-color: #C0C0C0; font-size: 20px; } div#deux { display: none; } div#un:hover + div#deux { display: block; }

Si on y réfléchit bien, il est possible d'utiliser ça en cascade et de faire des trucs vraiment terribles. Voire même des petits jeux sans être en flash ou en javascript geek