HTML et CSS Hover qui agit sur un autre élément
Résolu/Fermé
A voir également:
- Hover html
- Editeur html - Télécharger - HTML
- Html download - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- &Nbsp html ✓ - Forum Webmastering
- [HTML] - á et les autres - Forum HTML
1 réponse
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:
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
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
Modifié le 16 févr. 2019 à 18:01
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).
19 févr. 2019 à 19:19
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); }20 févr. 2019 à 02:38