[css] Afficher un div lors du passage de la souris sur un autre
4 participants
Page 1 sur 1
[css] Afficher un div lors du passage de la souris sur un autre
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:
CSS:
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
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
Dernière édition par Duche le Mer 8 Avr 2009 - 23:11, édité 2 fois
Duche- Modérateur
- Nombre de messages : 2210
Age : 39
Localisation : Louvain-la-Neuve (Belgique)
Profession / Etudes : Développeur en optimisation
Points : 8277
Date d'inscription : 16/01/2006
Re: [css] Afficher un div lors du passage de la souris sur un autre
Oh oui y a moyen !
Ca peut même pouvoir faire le sujet d'épreuves pourquoi pas !
Mais c'est normal le titre [php] ?
Ca peut même pouvoir faire le sujet d'épreuves pourquoi pas !
Mais c'est normal le titre [php] ?
Julien- Administrateur
- Nombre de messages : 12291
Age : 37
Localisation : Clermont-Ferrand
Profession / Etudes : Ingénieur
Points : 22511
Date d'inscription : 10/03/2005
Duche- Modérateur
- Nombre de messages : 2210
Age : 39
Localisation : Louvain-la-Neuve (Belgique)
Profession / Etudes : Développeur en optimisation
Points : 8277
Date d'inscription : 16/01/2006
Re: [css] Afficher un div lors du passage de la souris sur un autre
Avec moi ça marche pas (peut-être la connexion de haute qualité de mon Lycéé...)
porteuris- Membre
- Nombre de messages : 224
Age : 31
Localisation : BETHUNE
Profession / Etudes : Lycéen 1°S -si
Points : 6383
Date d'inscription : 19/03/2009
Re: [css] Afficher un div lors du passage de la souris sur un autre
Ou peut-être que tu utilises Merdosoft Explorer ?
Je ne l'ai pas testé dessus.
Je ne l'ai pas testé dessus.
Duche- Modérateur
- Nombre de messages : 2210
Age : 39
Localisation : Louvain-la-Neuve (Belgique)
Profession / Etudes : Développeur en optimisation
Points : 8277
Date d'inscription : 16/01/2006
Re: [css] Afficher un div lors du passage de la souris sur un autre
C'est possible ^^
porteuris- Membre
- Nombre de messages : 224
Age : 31
Localisation : BETHUNE
Profession / Etudes : Lycéen 1°S -si
Points : 6383
Date d'inscription : 19/03/2009
Re: [css] Afficher un div lors du passage de la souris sur un autre
J'ai testé, ça fonctionne sur Firefox mais pas sur Internet Explorer.
irina- Membre
- Nombre de messages : 646
Age : 37
Localisation : Still en Alsace
Profession / Etudes : je cherche un job
Points : 7345
Date d'inscription : 22/09/2008
Re: [css] Afficher un div lors du passage de la souris sur un autre
Quel est le comportement sous Internet Explorer ?
Ca s'affiche par défaut ou ça s'affiche pas du tout ?
Ca s'affiche par défaut ou ça s'affiche pas du tout ?
Duche- Modérateur
- Nombre de messages : 2210
Age : 39
Localisation : Louvain-la-Neuve (Belgique)
Profession / Etudes : Développeur en optimisation
Points : 8277
Date d'inscription : 16/01/2006
Re: [css] Afficher un div lors du passage de la souris sur un autre
Il y a juste un cadre violet avec le texte dedan et quand on passe dessus ça ne fait rien.
irina- Membre
- Nombre de messages : 646
Age : 37
Localisation : Still en Alsace
Profession / Etudes : je cherche un job
Points : 7345
Date d'inscription : 22/09/2008
Re: [css] Afficher un div lors du passage de la souris sur un autre
Ok, ca me rassure déjà. Ca fera seulement une fonctionnalité en moins, mais ça n'affiche pas mon div par défaut. C'est déjà ça
Duche- Modérateur
- Nombre de messages : 2210
Age : 39
Localisation : Louvain-la-Neuve (Belgique)
Profession / Etudes : Développeur en optimisation
Points : 8277
Date d'inscription : 16/01/2006
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|
Jeu 2 Juil 2015 - 15:16 par louaraychi
» Devoir maison sur équilibre et réaction chimique
Dim 1 Fév 2015 - 17:19 par sararose
» Ma présentation
Sam 25 Oct 2014 - 23:29 par Rith
» projet scientique sur la LUMIERE
Ven 26 Sep 2014 - 20:33 par benjamin-010
» La trajectoire de la Terre
Mar 5 Aoû 2014 - 22:19 par Alban
» Equilibrer une réaction redox
Dim 8 Juin 2014 - 21:18 par Courtney ♥
» les effets sur les lignes de transport de l’électricité
Ven 30 Mai 2014 - 17:14 par leila14
» lignes de transport de l'électricité
Ven 30 Mai 2014 - 17:07 par leila14
» Gravitation
Ven 16 Mai 2014 - 20:16 par fatimaa
» Maquette suspension de moto 2D
Jeu 17 Avr 2014 - 17:20 par Sti2d