Css怎么實現按鈕鼠標經過或鼠標點擊效果

這篇文章主要介紹“Css怎么實現按鈕鼠標經過或鼠標點擊效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Css怎么實現按鈕鼠標經過或鼠標點擊效果”文章能幫助大家解決問題。

一、實現效果圖

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

關于“Css怎么實現按鈕鼠標經過或鼠標點擊效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。