CSS：在懸停時更改div中的圖像

Question

目標：構建兩個應在懸停時更改背景顏色，文本顏色和圖標的塊。

麻煩：我對背景和文字沒有問題，但是我發現圖標有些問題。如何編輯我的HTML或CSS以實現目標？

這裏是我的代碼：https://jsfiddle.net/teyrq0ze/ 和圖像應該徘徊時使用：http://i.imgur.com/8MqehqH.png，http://i.imgur.com/pNgIqxQ.png。

Answer 1

將filter添加到懸停在divs上的圖像。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    color: #333; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 15px; 
 
    background: #333; 
 
} 
 

 
#footerblurb { 
 
    color: #fff; 
 
} 
 

 
#footerblurb-inner { 
 
    margin: 0 auto; 
 
    width: 650px; 
 
} 
 

 
#footerblurb .column1, 
 
.column2 { 
 
    float: left; 
 
    display: table; 
 
    width: 290px; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
    border: 1px dashed #fff; 
 
    transition: all .1s ease-in-out; 
 
    -webkit-transition: all .1s ease-in-out; 
 
    -moz-transition: all .1s ease-in-out; 
 
    -o-transition: all .1s ease-in-out; 
 
} 
 

 
#footerblurb .column1 { 
 
    margin-right: 6px; 
 
} 
 

 
#footerblurb .column1:hover, 
 
.column2:hover { 
 
    color: #333; 
 
    background: #fff; 
 
} 
 

 
#footerblurb .column1 img { 
 
    float: left; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
#footerblurb .column2 img { 
 
    float: right; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
#footerblurb .column1 span { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
#footerblurb .column2 span { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#footerblurb .column1:hover img, 
 
#footerblurb .column2:hover img{ 
 
\t -webkit-filter: invert(100%); 
 
\t filter: invert(100%); 
 
}

<div id="footerblurb"> 
 
    <div id="footerblurb-inner"> 
 

 
    <div class="column1" onclick="location.href=''"> 
 
     <span><img class="previous" src="http://i.imgur.com/0tnecTN.png"></span> 
 
     <span>text text text</span> 
 
    </div> 
 
    <div class="column2" onclick="location.href=''"> 
 
     <span>text text text</span> 
 
     <span><img class="next" src="http://i.imgur.com/e86z3mD.png"></span> 
 
    </div> 
 

 
    <div class="clr"></div> 
 
    </div> 
 
</div>

更新Demo這裏

你可以使用不同的過濾給不同的顏色。

欲瞭解更多信息read this

Answer 2

解決方案1：

添加一個額外的圖像，並默認隱藏。在懸停時切換其可見性。這裏是updated fiddle。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    color: #333; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 15px; 
 
    background: #333; 
 
} 
 
#footerblurb { 
 
    color: #fff; 
 
} 
 
#footerblurb-inner { 
 
    margin: 0 auto; 
 
    width: 650px; 
 
} 
 
#footerblurb .column1, 
 
.column2 { 
 
    float: left; 
 
    display: table; 
 
    width: 290px; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
    border: 1px dashed #fff; 
 
    transition: all .1s ease-in-out; 
 
    -webkit-transition: all .1s ease-in-out; 
 
    -moz-transition: all .1s ease-in-out; 
 
    -o-transition: all .1s ease-in-out; 
 
} 
 
#footerblurb .column1 { 
 
    margin-right: 6px; 
 
} 
 
#footerblurb .column1:hover, 
 
.column2:hover { 
 
    color: #333; 
 
    background: #fff; 
 
} 
 
#footerblurb .column1:hover img, 
 
#footerblurb .column2:hover img { 
 
    display: none; 
 
} 
 
#footerblurb .column1 img.hover, 
 
#footerblurb .column2 img.hover { 
 
    display: none; 
 
} 
 
#footerblurb .column1:hover img.hover, 
 
#footerblurb .column2:hover img.hover { 
 
    display: initial; 
 
} 
 
#footerblurb .column1 img { 
 
    float: left; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#footerblurb .column2 img { 
 
    float: right; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#footerblurb .column1 span { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#footerblurb .column2 span { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<div id="footerblurb"> 
 
    <div id="footerblurb-inner"> 
 

 
    <div class="column1" onclick="location.href=''"> 
 
     <span><img class="previous" src="http://i.imgur.com/0tnecTN.png"><img class="previous hover" src="http://i.imgur.com/8MqehqH.png"></span> 
 
     <span>text text text</span> 
 
    </div> 
 
    <div class="column2" onclick="location.href=''"> 
 
     <span>text text text</span> 
 
     <span><img class="next" src="http://i.imgur.com/e86z3mD.png"> 
 
     <img class="next hover" src="http://i.imgur.com/pNgIqxQ.png"></span> 
 
    </div> 
 

 
    <div class="clr"></div> 
 
    </div> 
 
</div>

解決方案2：

使用background-image和切換懸停圖像源。

Answer 3

除非你必須使用圖像出於某種原因。你可以使用像Font Awesome這樣的圖標庫。在那裏你可以很容易地改變圖標的​​顏色，因爲它們被視爲文本，並且也很容易擴展。

.column1, .column2 { 
    position:relative; 
} 
.column1:before { 
    font-family: FontAwesome; 
    content: "\f104"; 
    font-size:40px; 
    position:absolute; 
    left:70px; 
    top:4px; 
} 
.column2:before { 
    font-family: FontAwesome; 
    content: "\f105"; 
    font-size:40px; 
    position:absolute; 
    left:70px; 
    top:4px; 
} 

fiddle