Double Hover CSS

Ohw222
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Voici mone code

Le html (en simplifié

<div class="topbar" id="toggle-nav" onclick="nav();">
    <a class="btn-co">SE CONNECTER</a>
</div>

le css

.topbar{
    background-color: rgb(150,150,150);
    width: 100%;
    height: 45px;
    -webkit-transition: background 100ms linear;
    -moz-transition: background 100ms linear;
    -ms-transition: background 100ms linear;
    -o-transition: background 100ms linear;
    transition: background 100ms linear;
    color: #fff;
}
.topbar:hover{
    background-color: rgb(100,100,100);
}
.btn-co{
    background-color: rgb(150,150,150);
    border-radius: 5px;
    -webkit-transition: background 100ms linear;
    -moz-transition: background 100ms linear;
    -ms-transition: background 100ms linear;
    -o-transition: background 100ms linear;
    transition: background 100ms linear;
    color: #fff;
}
.btn-co:hover{
    background-color: rgb(100,100,100);
    color:rgb(220,220,220);
}

Ce que je recherche

Ce que je recherche, c'est detecter quand l'élément avec la class "btn-co" est hover, et dans ce cas, remmetre sa couleur originelle (rgb(150,150,150)) à l'élément ayant la classe "topbar".

Merci d'avance à vous,
HTMLement (c'est nul, mais bon)
~Ohw222

6 réponses

Laznet
Réponse acceptée

Bonjour

En CSS tu peux dire "Quand element_1 est hover element_2 doit être comme ça"

.btn-co:hover .topbar{
/* Style de l'élement topbar quand btn-co est "hover" */
background-color: rgb(150,150,150);
}
StanislasP
Réponse acceptée

Salut.

Il me semble qu'en réaliter, le css ne permet pas de remonter dans le DOM.
Tu ne devrais pouvoir styliser que l'élément séléctionner par ta règle, les enfants de celui ci et ceux qui le suivent au meme niveau dans le dom.

C'est pour cela que changer le label d'un input au focus de se dernier ne peut etre fait que si le label suit l'input. Aucunement lorsque celui ci est avant ou englobant l'input.

Je ne pense pas que tu puisse réaliser cette effet de cette maniere.

Ohw222
Auteur

Bojour et merci à toi Mika445 pour ta réponse :p

Ohw222
Auteur

Re salut mais avant j'utilisais edge pour vérifier que cela fonctionne, et c'était ok... Le seul problème c'est que seulement edge fait fonctionner cela...

fital

En CSS tu ne peux pas remonter dans le DOM mais tu peux faire simplement en JS avec Jquery genre :

$( ".btn-co" ).hover(function() {
  $("#toggle-nav").toggleClass( "topbarHover" );
});

Et ajouter la class :

.topbarHover{
  background-color: rgb(150,150,150);
}
Ohw222
Auteur

Bijour

Merci quand même, je me suis rendu compte que cela ne fonctionerait pas...

A++
~Ohw222