这篇文章主要介绍“Css怎么实现按钮鼠标经过或鼠标点击效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Css怎么实现按钮鼠标经过或鼠标点击效果”文章能帮助大家解决问题。
注意：如果是div，必须加上 tabindex="1"，否则，focus失效
计算
安全
数据库
网络和加速
企业服务
<div class="menu_label" tabindex="1">标签1</div>
<div class="menu_label" tabindex="1">标签2</div>
<div class="menu_label" tabindex="1">标签3</div>
<div class="menu_label" tabindex="1">标签4</div>
<div class="menu_label" tabindex="1">标签5</div>
<div class="menu_label" tabindex="1">标签6</div>active：鼠标经过后的样式
focus：鼠标点击后的样式
.menu_label {
float: left;
border: 1px rgb(67, 150, 202) solid;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 3px;
padding-top: 1px;
border-radius: 15px;
font-size: 10px;
margin-left: 15px;
margin-top: 8px;
color: rgb(67, 150, 202);
/* font-weight: bold; */
margin-bottom: 7px;
}
.menu_label:active {
background-color: rgb(67, 150, 202);
color: white;
}
.menu_label:focus {
background-color: rgb(67, 150, 202);
color: white;
}关于“Css怎么实现按钮鼠标经过或鼠标点击效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.51cto.com/u_15654527/5729165
