マウスでCSSを反転させた色

Question

私のカテゴリはすべて青色のアイコン/テキストで白いDIVで表示されています。マウスの上に色を反転させて、背景を青色にし、アイコン/テキストを白くしたいと思います。

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

私は、しかし、私はFAアイコンやスパンテキストに白い色を適用するかどうかはわからない、いかなる問題なく働いて、バックグラウンドを持っています。私はこれがシンプルでなければならないことを知っていますが、それを理解できません。更新

.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

...で、今のように私のCSSを：

あなたは<i>で定義されたインラインスタイルを持っています。これはすべての問題の根本的な原因です。

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

神は、それを見ていませんでした。あなたは次のように!importantを与える必要があります：!importantの使用は非常に落胆している

.catbox:hover a i { 
    background-color: #337ab7; 
    color: #fff !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; 
} 

以上、あなたが前に持っていたもののようにそれを維持：<i>ので

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

<a>内にある、それは色を取りますよ。

Answer 2

あなたはそれが

Clouds

のためではなく、アイコンまたは「4件の掲載」のテキストのために働くのコード

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