一、实现效果图
二、html代码
注意：如果是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>
三、css代码
active：鼠标经过后的样式文章来源：https://www.toymoban.com/news/detail-547331.html
focus：鼠标点击后的样式文章来源地址https://www.toymoban.com/news/detail-547331.html
.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】div或按钮鼠标经过或鼠标点击后效果样式（图文+示例）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
