Инвертировать цвета с помощью CSS на мышь над

Question

У меня есть все мои категории, показанные в белых DIVs с синими значками/текстом на них. Я хотел бы инвертировать цвета на мыши, делая вместо этого синий фон и значки/текст белый.

<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> 

У меня есть фон рабочего без любого вопроса, однако я не уверен, как применять белый цвет значков к.-а. или текст диапазона. Я знаю, что это должно быть просто, но не может понять это. Мой CSS как сейчас это ...

.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

Update:

Вы инлайн стиль определен в <i>. Это является основной причиной всей проблемы:

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

Бог, не видел этого. Вы должны дать !important как:

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

Использование !important очень сильно обескуражен. Так что используйте:

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

И изменить HTML, чтобы полностью удалить встроенный стиль:

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

---

Для ссылок, вы должны явно наследовать. Добавьте эту строку в CSS:

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

Или лучше, держать его как то, что вы были раньше:

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

С <i> внутри <a>, это займет цвет.

Answer 2

Не могли бы вы, пожалуйста, попробуйте ниже код

<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>