我想在按钮悬停时更改Google Material Icon
(实际图标本身)。 我想仅使用HTML
和CSS
来完成此操作。 我希望它从'plus'图标变为类似于'check'图标,具体而言是使用'done'图标。 Codepen如下。 谢谢。
.material-icons.md1 {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 33px;
margin-top: 12px;
}
.btnwrap {
position: fixed;
z-index: 2;
height: 60px;
width: 300px;
background-color: #074fb2;
font-size: 20px;
display: block;
text-align: center;
vertical-align: middle;
line-height: 60px;
color: #fff;
border-radius: 50px;
cursor: pointer;
}
.btntext1 {
position: absolute;
left:85px;
transition: all .1s;
}
.btntext2 {
position: absolute;
width: 100%;
transition: all .2s;
opacity: 0;
}
.innerbtn {
z-index: 1;
position: relative;
float: left;
height: 56px;
width: 56px;
background-color: #3e81dc;
border-radius: 50px;
display: inline-block;
margin-top: 2px;
margin-left:2px;
transition: all 1s;
}
.btnwrap:hover .btntext1 {
opacity: 0;
transition: all .5s;
}
.btnwrap:hover .btntext2 {
opacity: 1;
transition: all .5s;
}
.btnwrap:hover .innerbtn {
margin-left: 242px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div id="button1" class="btnwrap" title="download_btn">
<div class="innerbtn"><i class="material-icons md1">add</i></div>
<div class="btntext2">Click Now</div>
<div class="btntext1">Download for FREE</div>
</div>
:
<i class="material-icons md1"></i>
之间传递的内容。CSS无法更改该值。为什么不能使用JavaScript? - Baruch