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