HTML et CSS Hover qui agit sur un autre élément

Résolu/Fermé

GTCoraps_ - 16 févr. 2019 à 10:22
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

A voir également:

1 réponse

Réponse 1 / 1

Tsubi
16 févr. 2019 à 17:49

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

Tsubi
Modifié le 16 févr. 2019 à 18:01

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).

GTCoraps_
19 févr. 2019 à 19:19

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);
}

Tsubi
20 févr. 2019 à 02:38

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 ;)

Discussions similaires