仅使用htmlcss在悬停时更改Google素材图标

概述我想在按钮悬停上更改Google Material Icon(实际图标本身).我想只使用 HTML和CSS来做这件事.我希望它从“加号”图标变为类似“检查”图标的东西,特别是使用“完成”图标. Codepen下面.谢谢 .material-icons.md1 { font-family: 'Material Icons'; font-weight: normal; font 我想在按钮悬停上更改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;}<link href="https://Fonts.GoogleAPIs.com/icon?family=Material+Icons"  rel="stylesheet"><div ID="button1"  title="download_btn"><div ><i >add</i></div> <div >Click Now</div><div >Download for FREE</div></div>

https://codepen.io/anon/pen/YYEXYy

解决方法 所以我在这里回答我自己的问题.将HTML保留为空,在CSS中添加’：before’的’content’,然后在悬停状态下更改’：before’..请参阅forked Codepen：

<i  ></i></div> .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

总结

以上是内存溢出为你收集整理的仅使用html / css在悬停时更改Google素材图标全部内容，希望文章能够帮你解决仅使用html / css在悬停时更改Google素材图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。