鼠标点击、滑过某些元素实现动态添加一下样式

在vue2开放项目中，有些时候我们不使用组件，可能通过自写的一些元素，来实现一些动态效果。这里以div元素为案例，实现鼠标滑过、点击事件实现一些想要的样式。

:active，元素被点击时变色，但颜色在点击后消失；
:focus， 元素被点击后变色，且颜色在点击后不消失；

:hover， 元素被滑在元素上方时变色，但颜色划过之后会消失；

 .check-btn {
        padding: 5px 12px;
        border: 1px solid #dcdfe6;
        border-radius: 3px;
        .el-icon-arrow-left {
          margin-top: 5px;
          font-size: 16px;
          color: black;
        }
        .el-icon-arrow-right {
          margin-top: 5px;
          font-size: 16px;

          color: black;
        }
      }
       //鼠标滑过
      .check-btn:hover {
        border: 1px solid #0052d9;
      }
       //鼠标点击
      .check-btn:active {
        border: 1px solid #dcdfe6;
        i {
          color: #0052d9;
          font-weight: 600;
        }
      }
       //鼠标点击
      .check-btn:focus {
        border: 1px solid #dcdfe6;
        i {
          color: #e8e8e8;
        }
      }