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.