Sujet Précédent Sujet Suivant

élément modifier au survol d'un autre !

Résolu/Fermé
Unhommequicherche - 20 févr. 2019 à 17:41
 Unhommequicherche - 20 févr. 2019 à 20:46
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. 
<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...
A voir également:

2 réponses

Réponse 1 / 2
Unhommequicherche
20 févr. 2019 à 17:43
rebonjour,
Excuser moi d'avoir oublier de copier ce passage 
<script src="Ligne.js" ></script>
0
Réponse 2 / 2
jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712
20 févr. 2019 à 19:48
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> ....


0
jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712
20 févr. 2019 à 19:49
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 ....
0
Unhommequicherche
20 févr. 2019 à 20:46
Désoler du dérangement j'ai réussi a me corriger tout seul. merci quand même.

cordialement
0

Discussions similaires

Comment inspecter l'élément sur mobile ?
Sally -
Sally -

2 réponses
Impossible de copier car cet élément est trop volumineux
Alan_Cohen -
Utilisateur anonyme -

9 réponses
Documents scannés à modifier, photoshop et toutiquanti ...
Bebelle007 -
Khadija -

4 réponses