admin 管理员组

文章数量: 887007

鼠标悬停与点击效果

html代码

正常效果


点击效果


<a class="btn-v2  short-full-screen-v2 btn-none-v2" href="#"><i class="icon-short-full-screen" style="margin-left: 5px;"></i>全屏</a>
css代码

字体相应效果

.btn-v2:hover,.btn-v2:active,.btn-v2:focus{background-color: #369327;text-decoration: none;border: 1px solid #369327;}
.short-full-screen-v2{color:#666666;padding-right: 8px;padding-left: 0px;}
.btn-none-v2{background-color:#ffffff;border-color: #DCDCDC;color: #666666;padding:5px 10px;}
.btn-none-v2:hover{background-color:#02B300;color: #ffffff;text-decoration: none;border: 1px solid #02B300;}
.btn-none-v2:focus{background-color:#02B300;color: #ffffff;text-decoration: none;border: 1px solid #02B300;}

图片相应效果

.btn-v2 .icon-short-full-screen{background-position: -360px -654px;padding:1px 6px;}
.btn-v2:hover .icon-short-full-screen{background-position: -360px -725px;}
.btn-v2:focus .icon-short-full-screen{background-position: -360px -725px;}

本文标签： 鼠标悬停与点击效果

版权声明：本文标题：鼠标悬停与点击效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351606h1533231.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。