Inverser les couleurs avec CSS sur la souris sur

Question

J'ai toutes mes catégories montrées en DIV blancs avec des icônes bleues/texte sur eux. Je voudrais inverser les couleurs sur la souris, rendant le fond bleu et les icônes/texte blanc à la place.

<div class="col-md-3 col-sm-4"> 
    <div class="catbox"> 
     <a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a> 
     <a href="#"><h4>Clouds</h4></a> 
     <span style="color: #aaa;">4 Listings</span> 
    </div> 
</div> 

J'ai l'arrière-plan de travail sans aucun problème, mais je ne suis pas sûr de savoir comment appliquer une couleur blanche aux icônes de fa ou le texte span. Je sais que cela doit être simple mais ne peut pas tout à fait comprendre. Mon CSS comme maintenant est ...

.catbox { 
    background: #fff; 
    padding: 25px 10px; 
    margin: 25px 0 10px 25px; 
    text-align: center; 
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135); 
} 

.catbox:hover { 
    background-color: #337ab7; 
    color: #fff; 
} 

Answer 1

Mise à jour:

Vous avez un style en ligne défini dans <i>. C'est la cause de tout le problème:

<a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a> 
<!-- ------------------------------------^^^^^^^^^^^^^^^^^^^^^^ 

Dieu, ne l'a pas vu. Vous devez donner !important comme:

.catbox:hover a i { 
    background-color: #337ab7; 
    color: #fff !important; 
} 

L'utilisation de !important est très découragé. Il faut donc utiliser:

.catbox a i { 
    color: #337ab7; 
} 
.catbox:hover a i { 
    background-color: #337ab7; 
    color: #fff; 
} 

Et changer votre code HTML pour supprimer complètement le style en ligne:

<a href="#"><i class="fa fa-cloud fa-3x"></i></a> 

---

Pour les liens, vous devez hériter explicitement. Ajouter cette ligne de CSS:

.catbox:hover a { 
    background-color: inherit; 
    color: inherit; 
} 

Ou mieux, garder comme ce que vous aviez avant:

.catbox:hover, 
.catbox:hover a { 
    background-color: #337ab7; 
    color: #fff; 
} 

Depuis <i> est à l'intérieur <a>, il va prendre la couleur.

Answer 2

Pourriez-vous s'il vous plaît essayer avec le code ci-dessous

<div class="col-md-3 col-sm-4"> 
    <div class="catbox"> 
     <a href="#"><i class="fa fa-cloud fa-3x" style="color:#337ab7;"></i></a> 
     <a href="#"><h4>Clouds</h4></a> 
     <span>4 Listings</span> 
    </div> 
</div> 

<style> 

.catbox 
{ 
    background: #fff; 
    padding: 25px 10px; 
    margin: 25px 0 10px 25px; 
    text-align: center; 
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135); 
} 

.catbox:hover 
{ 
    background-color: #337ab7; 
    text-decoration: none; 
} 

.catbox:hover > a 
{ 
    color: #fff !important; 
} 
</style>