Affichage d'un div au survol d'un lien

Résolu
pijaku Messages postés 13513 Date d'inscription   Statut Modérateur Dernière intervention   -  
 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

8 réponses

  1.
    Groarh Messages postés 706 Statut Membre 185
     
    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 : 
    <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 ;)
    31
    1. ansofette
       
      salut!!
      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
      1
    2. citizenlo
       
      salut, moi j'ai un problème avec ce code.
      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
      0
    3. alphatrion > citizenlo
       
      Salut,

      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}
      -1
    4. choohy
       
      juste merci.
      signé: un pov débutant
      1
    5. dino
       
      merci beaucoup ça faisait deux jour que je cherchais à faire ce truc.
      0
  2. css mania
     
    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
    5
  3. Alphatrion
     
    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.
    3
  4. pijaku Messages postés 13513 Date d'inscription   Statut Modérateur Dernière intervention   2 772
     
    Superbe!!! Génial!!!
    Merci beaucoup.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Groarh Messages postés 706 Statut Membre 185
     
    @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... :)
    0
  7. Utilisateur anonyme
     
    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"

    ++
    0
  9. Nini_design
     
    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/
    0

Discussions similaires

Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
Retrouver liens copiés sur le téléphone
SAMA -
Lylou -

2 réponses
copie d'un lien dans le navigateur internet
Ulysse Orseau -
diamantnoir -

4 réponses
Rajouter des éléments à un menu en HTML
leparradiss -
David -

11 réponses
league of legend impossible d'initialiser le dispositif d'affichage
pascontent -
Tsagax -

5 réponses