仅使用html/css在悬停时更改Google素材图标
作者:只属于天天的牛牛 | 来源:互联网 | 2023-02-01 17:00
如何解决《仅使用html/css在悬停时更改Google素材图标》经验,为你挑选了1个好方法。
我想Google Material Icon
在按钮悬停上更改(实际图标本身).我想只用HTML
和做这个CSS
.我希望它从"加号"图标变为类似"检查"图标的东西,特别是使用"完成"图标.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;
}
https://codepen.io/anon/pen/YYEXYy
1> scott.schaff..:
所以我在这里回答我自己的问题.将html保留为空,在CSS中添加':before'的'content',然后在悬停状态下更改':before'..请参阅forked Codepen:
.material-icons.md1::before{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 33px;
content:"add";
}
.btnwrap:hover .material-icons.md1::before{
content:"done";
}
https://codepen.io/anon/pen/aEVOEr