élément modifier au survol d'un autre !
Résolu
Unhommequicherche
-
Unhommequicherche -
Unhommequicherche -
Bonjour; j'ai déjà vu la question être posez et je les moi même posez sans vraiment recevoir d'aide concrète ! mais le problème étant que je souhaite que ma ligne du dessus deviennent noir a certains endroit quand je passe sur certains lien.
voila mes code qui ne fonctionne malheureusement pas...
<html>
<head> <meta charset="utf-8" /> <title>Sophrologie</title> <link rel="stylesheet" href="style.css" /> </head>
<div id=Ligne1></div>
<div class=Ligne2>
<a id=L1 href="index.html" title="Accueil" />Accueil</a>
<a id=L2 href="sophrologie.html" title="Sophrologie" />Sophrologie</a>
<a id=L3 href="rendez-vous.html" title="rendez-vous" />rendez-vous</a>
</div>
html {background-color : rgb(245,245,245);}
a { text-decoration : none ; color : Black ; }
/* Page 1 */
/* ligne du dessu */
#Ligne1 { width : 1907px ; height : 2px ; position : absolute ; top : 120px ; left : 0px ; background-color : LightGrey ;z-index:1 ; }
.Ligne2 { width : 100px ; height : 2px ; position : absolute ; top : 120px ; left : 0px ; background-color : Black ; z-index: 2; }
/* lien principaux */
#L1 { position : absolute ; top : 10px ; left : 22px ; }
#L2 { position : absolute ; top : 10px ; left : 125px ; }
#L3 { width : 80px ; position : absolute ; top : 10px ; left : 250px ; }
document.getElementById('L2').addEventListener('mouseover',
function(){
document.getElementById('Ligne2').setAttribute('style', 'width : 100px ; height : 2px ; position : absolute ; top : 120px ; left : 100px ; background-color : Black ; z-index: 2;');
}
,false);
}
voila mes code qui ne fonctionne malheureusement pas...
2 réponses
-
rebonjour,
Excuser moi d'avoir oublier de copier ce passage<script src="Ligne.js" ></script>
-
Bonjour,
A quel endroit as tu placé ton JS exactement ?
A la fin de ton document html juste avant le </body> ? Si c'est non...ben corrige déjà ça.
EDIT: Ca commence mal.. il semble que ton document ne dispose pas de balises <body> ....
-
Je vois également dans ton code que tu cible la div par son id ... Ligne2 ...
Sauf que Ligne2 est une class.. pas un ID...
Bref.. essaye ça<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sophrologie</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="Ligne1"> </div> <div class="Ligne2" id="Ligne2"> <a id="L1" href="index.html" title="Accueil" />Accueil</a> <a id="L2" href="sophrologie.html" title="Sophrologie" />Sophrologie</a> <a id="L3" href="rendez-vous.html" title="rendez-vous" />rendez-vous</a> </div> <script type="text/javascript"> document.getElementById('L2').addEventListener('mouseover', function(){ var div_ligne = document.getElementById('Ligne2'); div_ligne.setAttribute('style', 'width : 100px ; height : 2px ; position : absolute ; top : 120px ; left : 100px ; background-color : Black ; z-index: 2;'); },false); </script> </body> </html>
NB: Ne pas oublié les quotes autour des attribut .... -
-
