Menu

HTML et CSS Hover qui agit sur un autre élément [Résolu]

- - Dernière réponse :  Tsubi - 20 févr. 2019 à 02:38
Bonjour,
je suis actuellement en train de galérer pour créer un site web avec un hover qui agit sur un autre élément.
voici mon code
<html>
<head> <meta charset="utf-8" /> <title>Sophrologie</title> <link rel="stylesheet" href="style.css" /> </head>
<div id=Ligne1></div>
  <nav>
     <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>
       <a id=L4 href="proposde.html" title="a propos de" />a propos de</a>
     </div>
  </nav>
</html>

html {background-color : rgb(245,245,245);}
a    { text-decoration : none ; color : Black ; }

/*   ligne du dessu   */
#Ligne1 { width : 1920px ; 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;   }
/* annimation ligne du dessu  */
#L2:hover .Ligne2 { width : 120px ; height : 2px ; position : absolute ; top : 120px ; left : 100px ; background-color : Black ; z-index: 2; }

nav{}
/*   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 ;  }
#L4    { width : 80px ; position : absolute ; top : 10px ; left : 370px ; }



Configuration: Windows / Chrome 72.0.3626.109
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
1
Merci
Bonjour,
tournez vous plutôt vers le JavaScript qui peut détecter un événement(comme un survol d'un élément HTML) et modifier un autre élément de la page.
Il existe des possibilités en CSS mais sans programmation cela ne va pas très loin.

Un exemple qui change le CSS d'un texte en survolant un lien:

<html>
<head>

</head>
<body>
<a href='#' id='survol' >survolez pour changer le texte</a>
<p id=change>
un texte qui prends un style au survol du lien
</p>

<!-- on indique le JavaScript par la balise script, ou encore mieux en utilisant un fichier externe-->
<script>
/** Ici la méthode addEventListener est appliquée à l'élément qui a pour ID 'survol' */
document.getElementById('survol').addEventListener('mouseenter',
/** cette méthode comprends la détection de l'événement ici onmouseenter pour un survol et une fonction qui va déterminenr l'action à effectuer lorsque l'événement est détecté*/
function(){
/* cette fonction indique de changer le style par l'attribut style de la balise concernnée- ici l'élément ayant pour id 'change'*/
document.getElementById('change').setAttribute('style', 'font-weight:bold;color:red;background-color:blue;');
}
,false);
</script>
</body>
</html>

Un autre exemple avec entrée et sortie de la souris sur et hors de l'élément:
https://www.w3schools.com/jsref/event_onmouseenter.asp

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 39199 internautes nous ont dit merci ce mois-ci

Ici vous employez un sélecteur pour cibler 2 éléments? #L2:hover .Ligne2
Ce n'est pas possible et ne marche pas comme ça, l'espace entre les 2 sélecteurs indique que l'un est iinclus(enfant) dans(de) l'autre pour ne sélectionner que ce dernier(ce qui ne doit pas fonctionner vu qu'il y a une pseudo-classe).
J'ai essayer avec votre script modifier mais sans résultat...
j'ai fait avec un fichier externe et je les déclarer dans index.html
voici les lignes de code :
<html>
<head> <meta charset="utf-8" /> <title>Sophrologie</title> <link rel="stylesheet" href="style.css" /> </head>
<div id=Ligne1></div>
  <nav>
  <script src="Ligne.js"> </script>
     <div 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>
       <a id=L4 href="proposde.html" title="a propos de" />a propos de</a>
     </div>
  </nav>
</html>

html {background-color : rgb(245,245,245);}
a    { text-decoration : none ; color : Black ; }

/*   ligne du dessu   */
#Ligne1 { width : 1920px ; 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;   }
/* annimation ligne du dessu  */

nav{}
/*   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 ;  }
#L4    { width : 80px ; position : absolute ; top : 10px ; left : 370px ; }

/** Ici la méthode addEventListener est appliquée à l'élément qui a pour ID 'Ligne2' */
document.getElementById('L2').addEventListener('mouseenter',
/** cette méthode comprends la détection de l'événement ici onmouseenter pour un Ligne2 et une fonction qui va déterminenr l'action à effectuer lorsque l'événement est détecté*/
function(){
/* cette fonction indique de changer le style par l'attribut style de la balise concernnée- ici l'élément ayant pour id 'change'*/
document.getElementById('Ligne2').setAttribute('style', 'width : 100px ; height : 2px ; position : absolute ; top : 120px ; left : 100px ; background-color : Black ; z-index: 2;');
}
,false);
}
C'est à adapter bien sûr! Le script n'est qu'un exemple du fonctionnement et de son principe. Après on parle d'entraide ici , ce n'est pas faire les choses pour vous mais vous aider à les faire ;)
Commenter la réponse de Tsubi