首页 前端知识 【Css】div或按钮鼠标经过或鼠标点击后效果样式(图文 示例)

【Css】div或按钮鼠标经过或鼠标点击后效果样式(图文 示例)

2024-02-20 09:02:54 前端知识 前端哥 279 427 我要收藏

一、实现效果图

 二、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:鼠标经过后的样式

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;
    }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2333.html
标签
评论
发布的文章

AJAX(二)jQuery

2024-03-05 09:03:04

jQuery操作DOM(3)

2024-03-05 09:03:36

jQuery - 获取内容和属性

2024-03-05 09:03:34

深拷贝浅拷贝方法总结

2024-03-05 09:03:27

JQuery简介与解析

2024-03-01 12:03:31

Java Web(十)--jQuery

2024-03-05 09:03:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!