Affichage d'un div au survol d'un lien
Résolu
pijaku
Messages postés
12263
Date d'inscription
Statut
Modérateur
Dernière intervention
-
dino -
dino -
Bonjour,
Soit un menu css avec sous et sous-sous-menu du style :
extrait html :
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a href="menu 1">xxxxxx</span></a>
<ul class="niveau2">
<li><a href="Sous menu 1.1">yyy</a></li>
</ul>
</li>
<li class="sousmenu"><a href="menu 2">xxxxxxx</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 2.1">yyyy</a>
<ul class="niveau3">
<li><a href="Sous sous menu 2.1.1">zzzzz</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 2.2">yyyyy</a>
<ul class="niveau3">
<li><a href="Sous sous menu 2.2.1">zzzzzzz</a></li>
<li><a href="Sous sous menu 2.2.2">zzzzzzz</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
extrait css :
div#menu a {
color:#000000
}
div#menu li:hover {
background: #EDD
}
div#menu li a {
text-decoration: none;
padding: 4px 0 4px 8px;
display:block; border-left:
8px solid #BBB; width:84px
}
div#menu li a:hover {
border-left-color: red;
}
}
div#menu ul ul li a:hover {
border-left-color: #00FF00;
}
Ca fonctionne bien mais je voudrais qu'au survol de mes liens, une image (différente à chaque lien...) apparaisse ailleurs dans ma page. L'un de vous pourrait-il éclairer ma lanterne?
D'avance merci pour toute suggestion css, javascript... (le javascript ne dérange pas car l'apparition d'images est purement décorative et ne gène en rien la navigation.).
Merci
Soit un menu css avec sous et sous-sous-menu du style :
extrait html :
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a href="menu 1">xxxxxx</span></a>
<ul class="niveau2">
<li><a href="Sous menu 1.1">yyy</a></li>
</ul>
</li>
<li class="sousmenu"><a href="menu 2">xxxxxxx</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 2.1">yyyy</a>
<ul class="niveau3">
<li><a href="Sous sous menu 2.1.1">zzzzz</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 2.2">yyyyy</a>
<ul class="niveau3">
<li><a href="Sous sous menu 2.2.1">zzzzzzz</a></li>
<li><a href="Sous sous menu 2.2.2">zzzzzzz</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
extrait css :
div#menu a {
color:#000000
}
div#menu li:hover {
background: #EDD
}
div#menu li a {
text-decoration: none;
padding: 4px 0 4px 8px;
display:block; border-left:
8px solid #BBB; width:84px
}
div#menu li a:hover {
border-left-color: red;
}
}
div#menu ul ul li a:hover {
border-left-color: #00FF00;
}
Ca fonctionne bien mais je voudrais qu'au survol de mes liens, une image (différente à chaque lien...) apparaisse ailleurs dans ma page. L'un de vous pourrait-il éclairer ma lanterne?
D'avance merci pour toute suggestion css, javascript... (le javascript ne dérange pas car l'apparition d'images est purement décorative et ne gène en rien la navigation.).
Merci
A voir également:
- Affichage d'un div au survol d'un lien
- Créer un lien pour partager des photos - Guide
- Lien url - Guide
- Verifier un lien - Guide
- Double affichage sur un seul écran - Guide
- Faux lien prank - Forum Autoit / batch
8 réponses
Salut,
"Soit un menu css avec sous et sous-sous-menu... " intoxiqué aux problèmes de maths ? xD
Je propose une solution javascript. Supposons que les div contenant les images soient masquées au chargement de la page ; au survol du lien, la div devient visible, puis lorsque le curseur n'est plus sur le lien, la div redevient invisible.
Voici un exemple :
Bon courage !
Pour des explications sur mon code, n'hésite pas à demander ;)
"Soit un menu css avec sous et sous-sous-menu... " intoxiqué aux problèmes de maths ? xD
Je propose une solution javascript. Supposons que les div contenant les images soient masquées au chargement de la page ; au survol du lien, la div devient visible, puis lorsque le curseur n'est plus sur le lien, la div redevient invisible.
Voici un exemple :
<html>
<head>
<title>test pijaku</title>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
<style type="text/css"><!--
div {visibility:hidden}
--></style>
</head>
<body>
<ul>
<li onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')">lien 1</li>
<li onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')">lien 2</li>
<li onMouseOver="div.show('div3')" onMouseOut="div.hide('div3')">lien 3</li>
</ul>
<div id="div1">
<img src="" alt="image 1" />
</div>
<div id="div2">
<img src="" alt="image 2" />
</div>
<div id="div3">
<img src="" alt="image 3" />
</div>
</body>
</html>
Bon courage !
Pour des explications sur mon code, n'hésite pas à demander ;)
Et supposons que le javascript soit désactivé ???
Vois donc ce lien il t'en apprendra beaucoup ....
css menu et texte en survol
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol
Vois donc ce lien il t'en apprendra beaucoup ....
css menu et texte en survol
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol
Bonjour, je me permets de poser une question dans ce topic car j'utilise la fonction javascript donnée par Groarh ici mais j'ai un problème :
j'ai donc un div qui s'affiche au survol du lien et est caché ensuite. Le seul problème est que lors du chargement de la page, il est d'ores et déjà affiché et ce n'est qu'après avoir passé la souris sur le lien que le div se cache.
Comment faire pour qu'il ne s'affiche pas avant le survol du lien ?
merci de m'aider, j'ai pas réussi à trouver une solution qui s'intègre sur mon début de code.
j'ai donc un div qui s'affiche au survol du lien et est caché ensuite. Le seul problème est que lors du chargement de la page, il est d'ores et déjà affiché et ce n'est qu'après avoir passé la souris sur le lien que le div se cache.
Comment faire pour qu'il ne s'affiche pas avant le survol du lien ?
merci de m'aider, j'ai pas réussi à trouver une solution qui s'intègre sur mon début de code.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
@css mania : tu comptes t'en sortir avec les pseudo-classes ? Là, il s'agit de faire apparaître un autre élément, et puisque tu as l'air de bien connaître le css tu dois savoir, je pense, que le css 2.1 ne permet pas de faire ça.
Ensuite, j'ai dit que je proposais une solution javascript, et cette solution a convenu à pikaju.
J'admets que j'aurais pu proposer une solution avec des gestionnaires d'évènements, mais c'est toujours plus long à expliquer.
Enfin, le topic est résolu depuis un mois et demi. J'ai vu pire en matière de déterrage de sujet, mais bon quand même... :)
Ensuite, j'ai dit que je proposais une solution javascript, et cette solution a convenu à pikaju.
J'admets que j'aurais pu proposer une solution avec des gestionnaires d'évènements, mais c'est toujours plus long à expliquer.
Enfin, le topic est résolu depuis un mois et demi. J'ai vu pire en matière de déterrage de sujet, mais bon quand même... :)
desolé du deterage
mais je voulais quand meme remercier Groarh
ta solution fonction nickel chez moi
j'ai juste modifié un truc dans ton script
dans la deuxieme partie, je met ".display = 'none';" au lieu de ".visibility = 'hidden';"
comme sa le div disparait totalement quand on en a pas besoin
et pour Alphatrion
si tu n'a pas trouvé
il faut que tu indique dans le css, sur la class de ton div "display:none" ou "visibility:hidden"
++
mais je voulais quand meme remercier Groarh
ta solution fonction nickel chez moi
j'ai juste modifié un truc dans ton script
dans la deuxieme partie, je met ".display = 'none';" au lieu de ".visibility = 'hidden';"
comme sa le div disparait totalement quand on en a pas besoin
et pour Alphatrion
si tu n'a pas trouvé
il faut que tu indique dans le css, sur la class de ton div "display:none" ou "visibility:hidden"
++
Je déterre le sujet mais vous savez comment superposer les div? Pour éviter qu'elles soient les unes sous les autres?
Merci
Merci
Bonjour!
Qui peux m'aider ????
Voilà, j'ai bâti mon propre site et j'ai changer l'image du curseur
Seulement ...le curseur passe derrière mes images plutôt que devant.!!!!
On le vois passé sur ma bannière et après !!! ..... pu rien !!!
Que dois-je changer dans le script....aidez moi SVP.
Je suis novice
Voici mon site! => http://chatterie-hello-kitty.e-monsite.com/
Qui peux m'aider ????
Voilà, j'ai bâti mon propre site et j'ai changer l'image du curseur
Seulement ...le curseur passe derrière mes images plutôt que devant.!!!!
On le vois passé sur ma bannière et après !!! ..... pu rien !!!
Que dois-je changer dans le script....aidez moi SVP.
Je suis novice
Voici mon site! => http://chatterie-hello-kitty.e-monsite.com/
l'explication que tu as donné m'aide un peu beaucoup dans mes recherches mais la chose que je n'arrive pas c'est que je voudrais que l'image différente qui apparait a chaque survol se trouve au même endroit.Or avec cette methode elle se situe les une en dessous des autres!!
y aurai t-il une astuce que je n'ai pas compris?
je te remercies
ansofette
je cherche à garder cette page: https://www.118712.fr/sortir.html
sauf que je voudrais que mes div masquées apparaissent au survol de la souris au lieu d'avoir à cliquer sur les boutons.
Quand je rentre ton code, si je garde cette partie la :
<style type="text/css"><!--
div {visibility:hidden}
--></style>
plus aucune div ne reste. Si je l'enlève, tout s'affiche à l'ouverture de la page.
T'aurai pas une solution pour définir les div que l'on veut masquer afin que les autres ne bougent pas ?
merci beaucoup
je suis pas sûr de comprendre le problème, mais je crois qu'il te suffira d'attribuer une class aux div qui doivent apparaitre qu'après passage de souris (genre <div class="popup">) et dans ton css tu mets :
.popup {visibility:hidden}
signé: un pov débutant