Deux commande CSS simultanément

Fermé
vins62100 Messages postés 134 Date d'inscription jeudi 28 février 2013 Statut Membre Dernière intervention 23 octobre 2018 - 16 juin 2018 à 08:32
vins62100 Messages postés 134 Date d'inscription jeudi 28 février 2013 Statut Membre Dernière intervention 23 octobre 2018 - 18 juin 2018 à 09:11
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 ^^
A voir également:

3 réponses

jordane45 Messages postés 38134 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 avril 2024 4 646
16 juin 2018 à 14:44
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 :
<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;
}

0
xmediacreation.com Messages postés 49 Date d'inscription mercredi 6 juin 2018 Statut Membre Dernière intervention 11 septembre 2018 8
16 juin 2018 à 17:43
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
0
vins62100 Messages postés 134 Date d'inscription jeudi 28 février 2013 Statut Membre Dernière intervention 23 octobre 2018 3
18 juin 2018 à 09:11
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
0