Deux commande CSS simultanément
vins62100
Messages postés
135
Date d'inscription
Statut
Membre
Dernière intervention
-
vins62100 Messages postés 135 Date d'inscription Statut Membre Dernière intervention -
vins62100 Messages postés 135 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai débuter, il y a peu, code avec le HTML et le CSS avec Atom sous linux. Je vous avoue je m'amuse comme un gosse à Disney ;) :D
Mais il y a une chose que je n'arrive pas à faire. J'ai cherché sur le net et pas moyen de trouver une réponse.
J'aimerai trouver le moyen de déclencher deux commandes CSS ":hover" à la fois alors que le pointeur de souris ne se trouve que sur un seul lien.
Je ne sais pas si j'ai réussi à me faire comprendre mais je vais vous mettre un exemple : trois liens qui se suivent de cette manière : "Accueil" "A propos" "Contact". "Accueil" et "Contact" ont un ":hover { background-color: yellow; }" séparé. J'aimerai que lorsque je mets ma souris sur le lien "Accueil", non seulement son le background-color apparaît mais également celui de "Contact" alors que la souris reste sur "Accueil".
Alors oui, j'imagine que cette demande peut vous paraître bizarre mais là le but n'est pas réellement de faire ça avec des liens ou des ":hover" mais juste de réussir à comprendre comment déclencher deux commandes simultanément (":hover" était pour imager ma problématique ;) ). Je vais continuer à chercher de mon coté mais si quelqu'un à une idée ;)
Merci d'avance ^^
J'ai débuter, il y a peu, code avec le HTML et le CSS avec Atom sous linux. Je vous avoue je m'amuse comme un gosse à Disney ;) :D
Mais il y a une chose que je n'arrive pas à faire. J'ai cherché sur le net et pas moyen de trouver une réponse.
J'aimerai trouver le moyen de déclencher deux commandes CSS ":hover" à la fois alors que le pointeur de souris ne se trouve que sur un seul lien.
Je ne sais pas si j'ai réussi à me faire comprendre mais je vais vous mettre un exemple : trois liens qui se suivent de cette manière : "Accueil" "A propos" "Contact". "Accueil" et "Contact" ont un ":hover { background-color: yellow; }" séparé. J'aimerai que lorsque je mets ma souris sur le lien "Accueil", non seulement son le background-color apparaît mais également celui de "Contact" alors que la souris reste sur "Accueil".
Alors oui, j'imagine que cette demande peut vous paraître bizarre mais là le but n'est pas réellement de faire ça avec des liens ou des ":hover" mais juste de réussir à comprendre comment déclencher deux commandes simultanément (":hover" était pour imager ma problématique ;) ). Je vais continuer à chercher de mon coté mais si quelqu'un à une idée ;)
Merci d'avance ^^
A voir également:
- Deux commande CSS simultanément
- Invite de commande - Guide
- Commande terminal mac - Guide
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
3 réponses
Bonjour,
ça dépend un peu de la structure de ton code html.
Dire que tes liens sont côtes à côtés (visuellement dans ta page....) ne nous indiques pas si ils sont dans le même container ou des container séparés.
Par exemple :
N'est pas la même chose que
Quoi qu'il en soit, tu peux regarder les sélecteurs CSS
par exemple
Tu peux avoir, par exemple, un truc du genre.
ça dépend un peu de la structure de ton code html.
Dire que tes liens sont côtes à côtés (visuellement dans ta page....) ne nous indiques pas si ils sont dans le même container ou des container séparés.
Par exemple :
<div><a href="home.php" class="classLien" > Accueiil</a></div> <div><a href="aaa.php" class="classLien" > aaa</a></div> <div><a href="xxx.php" class="classLien"> xxx</a></div>
N'est pas la même chose que
<div> <a href="home.php" class="classLien"> Accueiil</a> <a href="aaa.php" class="classLien"> aaa</a> <a href="xxx.php" class="classLien"> xxx</a> </div>
Quoi qu'il en soit, tu peux regarder les sélecteurs CSS
par exemple
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
Tu peux avoir, par exemple, un truc du genre.
.classLien:hover + a{
color:red;
}
Bonjour,
Tu dois utiliser du javascript, avec un déclenchement onhover de Accueil, qui ajoute une classe hover par exemple à accueil et ton css devient a:hover, .hover { background-color: yellow; }
https://api.jquery.com/addclass/
https://api.jquery.com/on/
Attention, il faudra aussi retirer cette classe à la sortie
Tu dois utiliser du javascript, avec un déclenchement onhover de Accueil, qui ajoute une classe hover par exemple à accueil et ton css devient a:hover, .hover { background-color: yellow; }
https://api.jquery.com/addclass/
https://api.jquery.com/on/
Attention, il faudra aussi retirer cette classe à la sortie
Bonjour,
Je suis désolé de répondre aussi tard, je ne m'y suis pas remis du weekend.
Mon code html est mis de la manière suivante :
</div>
<div>
<ul id="navbar">
<li class="lnavbar"> <a class="navbar" href="#">Accueil</a> </li>
<li class="lnavbar"> <a class="navbar" href="#">Vitrine</a> </li>
<li class="lnavbar" id="testa"> <a class="navbar" href="#">Notre agence</a> </li>
</ul>
</div>
Je n'ai pas encore mis les liens.
Et mon code CSS :
.lnavbar{
float: left;
list-style-type: none;
padding: 25px 15px;
}
.navbar{
text-decoration: none;
color: white;
.lnavbar{
float: left;
list-style-type: none;
padding: 25px 15px;
}
.navbar{
text-decoration: none;
color: white;
Voilà
Donc mon objectif est toujours le même c'est à dire activer un hover par le biais d'un autre hover sans que la souris soit sur le 1er élément.
SI j'ai bien compris : il faut passer par du Javascript pour une tel manip ? (ça voudrais dire que je ne suis pas arrivé assez loin dans le cour... je déteste être limité :'D)
En espérant que je n'ai pas réagis trop tard pour que vous m'aidiez ;) :D
Je suis désolé de répondre aussi tard, je ne m'y suis pas remis du weekend.
Mon code html est mis de la manière suivante :
</div>
<div>
<ul id="navbar">
<li class="lnavbar"> <a class="navbar" href="#">Accueil</a> </li>
<li class="lnavbar"> <a class="navbar" href="#">Vitrine</a> </li>
<li class="lnavbar" id="testa"> <a class="navbar" href="#">Notre agence</a> </li>
</ul>
</div>
Je n'ai pas encore mis les liens.
Et mon code CSS :
.lnavbar{
float: left;
list-style-type: none;
padding: 25px 15px;
}
.navbar{
text-decoration: none;
color: white;
.lnavbar{
float: left;
list-style-type: none;
padding: 25px 15px;
}
.navbar{
text-decoration: none;
color: white;
Voilà
Donc mon objectif est toujours le même c'est à dire activer un hover par le biais d'un autre hover sans que la souris soit sur le 1er élément.
SI j'ai bien compris : il faut passer par du Javascript pour une tel manip ? (ça voudrais dire que je ne suis pas arrivé assez loin dans le cour... je déteste être limité :'D)
En espérant que je n'ai pas réagis trop tard pour que vous m'aidiez ;) :D