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