surcharge d'un :hover

**mhuress** · 17/02/2023, 15h48

Bonjour à tous,

J'ai un cas... pénible.
J'utilise un framework css, et ces benêts on fait un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.btn:hover, .btn-large:hover, .btn-small:hover {
  background-color: #2bbbad;
}

sauf que cette couleur ne va pas du tout avec le thème que j'ai mis en place !

j'ai plein de <button class="btn ....> partout, avec des couleurs différentes, et j'aimerais seulement que la couleur s'affadisse sur le hover.
Surcharger le .btn:hover par un background-color:unset ne fait que disparaître la couleur.
J'ai essayé d'utiliser currentBackgroundColor, mais il reprend la couleur du premier :hover

J'ai essayé d'utiliser attr() mais forcément, c'était bête : il ne peut pas interpréter l'attribut class dans le css

J'aimerais savoir s'il est possible de surcharger le .btn:hover en reprenant la couleur de l'élément du dom survolé par la souris, et si oui, comment ?
Sachant que ma contrainte est que je ne peux pas toucher au framework d'origine... ce serait trop facile sinon.

Autrement dit, j'ai ça, côté

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<html>
  <body>
    <button class="btn red">un</button>
    <button class="btn green">un</button>
    <button class="btn blue">un</button>
    ....
  </body>
</html>

Et ça côté CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!-- je ne peux pas toucher -->
.btn:hover, .btn-large:hover, .btn-small:hover {
  background-color: #2bbbad;
}
<!-- je voudrais surcharger le :hover -->
.btn:hover, .btn-large:hover, .btn-small:hover {
  background-color: <<la couleur de l'élément survolé>>;
  opacity:0.7;
}

Merci d'avoir pris le temps de lire.

**Doksuri** · 17/02/2023, 16h08

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.btn:hover, .btn-large:hover, .btn-small:hover {
  background-color: red !important;
}}

sinon tu peux essayer de te tourner vers les @layers developer.mozilla.org/fr/docs/Web/CSS/@layer

**mhuress** · 17/02/2023, 16h45

Merci d'avoir tenté de répondre Doksuri.
Mais, comme le montre l'exemple, j'ai trois boutons, de 3 couleurs différentes.
Si c'était simplement pour mettre du rouge, j'aurais trouvé

Là, j'aimerais remettre le bleu, le rouge ou le vert, selon le bouton survolé, pour surcharger celui qui me met un truc débile que je ne veux pas, mais que le bouton survolé conserve sa valeur.

Pour ce qui est des @layer, ça aurait été une super idée, mais, le prérequis était que "je ne peux pas modifier le framework existant"
Comme il est déclaré avant (cf. l'exemple), même si je déclare un @layer, il sera prioritaire... et du coup, ça ne marchera toujours pas.

Désolé, mais ça ne répond pas à mon problème.

**ddaweb** · 17/02/2023, 17h21

Il me semble que vu que vous mettez un élément de couleur, ce serait comme ceci avec exemple pour le bleu, faire la même chose pour les autres en remplaçant le "blue" ... pas d'espace !!:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.btn.blue:hover, .btn-large.blue:hover, .btn-small.blue:hover {
  background-color: blue;
  opacity:0.7;
}

J'ai mis blue, modifiez par votre code couleur bleue

**mhuress** · 20/02/2023, 07h07

Merci beaucoup ddaweb.

Cette solution fonctionne.
Mais... c'est de ma faute. Mon exemple était trop "simple".
Effectivement, si j'ai une classe, comme "red", "blue", ... c'est facile. Et il ne me reste plus qu'à espérer que les classes sont bien nommées et que personne ne viendra ajouter une classe...
Il me reste aussi à espérer que personne n'utilisera d'attribut style, ou qu'un développer javascript ne va pas définir le style à la volée... bref, il y a des failles à cette solution.
Ce que je souhaitais, c'était savoir si on pouvait surcharger le hover de btn, en récupérant la couleur de btn (comme avec currentColor ou currentBackColor) de manière générique.

Comme je n'ai trouvé que currentColor et currentBackColor, et que, manifestement, je récupère la couleur imposée par le premier hover... ça ne fonctionne pas.
Hélas !!!!

Bon, j'ai l'impression que la réponse est "non".
Du coup, je vais mettre ce post en "résolu"... Mais j'aurais aimé une solution générique.

En tous cas, j'ai testé ta solution, qui me demande une 30aine de lignes de css pour les cas des boutons identifiés... (oui oui

) et ça fonctionne. Donc, c'est top. Merci.

**ddaweb** · 20/02/2023, 09h24

Envoyé par mhuress

Et il ne me reste plus qu'à espérer que les classes sont bien nommées et que personne ne viendra ajouter une classe...
Il me reste aussi à espérer que personne n'utilisera d'attribut style, ou qu'un développer javascript ne va pas définir le style à la volée... bref, il y a des failles à cette solution.

Il suffit d'établir les règles auxquelles tout le monde devra s'y conformer ... je sais, c'est facile à dire, mais en société cela se passe souvent comme cela.

Pour le CSS, il y a moyen de réduire les redondances de code, comme par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ----- Déterminer le style des boutons
.btn {
// style des boutons
background-color: #666; // ----- couleur de fond par défaut à choisir
}
.btn-large{
// style des boutons
background-color: #666; // ----- couleur de fond par défaut à choisir
}
.btn-small{
// style des boutons
background-color: #666; // ----- couleur de fond par défaut à choisir
}
// ----- Les différentes couleurs connues
.btn.blue, .btn-large.blue, .btn-small.blue {
  background-color: blue;
}
...
// ----- le hoover
.btn:hover, .btn-large:hover, .btn-small:hover {
  opacity:0.7;
}

Si un bouton avec une couleur par défaut apparaît -> une nouvelle couleur est présente

surcharge d'un :hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager