目標:構建兩個應在懸停時更改背景顏色,文本顏色和圖標的塊。CSS:在懸停時更改div中的圖像
麻煩:我對背景和文字沒有問題,但是我發現圖標有些問題。如何編輯我的HTML或CSS以實現目標?
這裏是我的代碼:https://jsfiddle.net/teyrq0ze/ 和圖像應該徘徊時使用:http://i.imgur.com/8MqehqH.png
,http://i.imgur.com/pNgIqxQ.png
。
目標:構建兩個應在懸停時更改背景顏色,文本顏色和圖標的塊。CSS:在懸停時更改div中的圖像
麻煩:我對背景和文字沒有問題,但是我發現圖標有些問題。如何編輯我的HTML或CSS以實現目標?
這裏是我的代碼:https://jsfiddle.net/teyrq0ze/ 和圖像應該徘徊時使用:http://i.imgur.com/8MqehqH.png
,http://i.imgur.com/pNgIqxQ.png
。
將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
解決方案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
和切換懸停圖像源。
謝謝你Pugazh! – KOKOC
除非你必須使用圖像出於某種原因。你可以使用像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;
}
您應該編輯您的問題,在這裏貼相關的代碼。外部鏈接最終變得不可用,並阻止具有類似問題的前景用戶從您的問題中受益。 – Andrej