【Css】div或按钮鼠标经过或鼠标点击后结果样式（图文+示例）

一、实现结果图


 二、html代码

注意：如果是div，必须加上 tabindex="1"，否则，focus失效

1.           <div class="menu_label" tabindex="1">标签1</div>
2.           <div class="menu_label" tabindex="1">标签2</div>
3.           <div class="menu_label" tabindex="1">标签3</div>
4.           <div class="menu_label" tabindex="1">标签4</div>
5.           <div class="menu_label" tabindex="1">标签5</div>
6.           <div class="menu_label" tabindex="1">标签6</div>
7.         

复制代码

三、css代码

active：鼠标经事后的样式
focus：鼠标点击后的样式

2.     .menu_label {
3.       float: left;
4.       border: 1px rgb(67, 150, 202) solid;
5.       padding-left: 10px;
6.       padding-right: 10px;
7.       padding-bottom: 3px;
8.       padding-top: 1px;
9.       border-radius: 15px;
10.       font-size: 10px;
11.       margin-left: 15px;
12.       margin-top: 8px;
13.       color: rgb(67, 150, 202);
14.       /* font-weight: bold; */
15.       margin-bottom: 7px;
16.     }
17.     .menu_label:active {
18.       background-color: rgb(67, 150, 202);
19.       color: white;
20.     }
21.     .menu_label:focus {
22.       background-color: rgb(67, 150, 202);
23.       color: white;
24.     }

复制代码

来源：https://blog.csdn.net/dxnn520/article/details/127030537
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！