vue中鼠标移入移出给元素添加不同的样式

vue中鼠标移入移出是比较简单的，给元素绑定移入移出的方法，然后在移入移出里面分别绑定不同的元素class名，再通过样式设置就好了。

部分代码如下：

html部分:

<div class="dhxrb_hole" @mouseenter="changeActive($event)" @mouseleave="removeActive($event)">
            <img
              class="dhxrb_image_big"
              src=""
            />
            <div class="dhxrb_label_button">新建</div>
</div>
 
JavaScript部分：

 methods: {
      changeActive(e) {
          console.log(e);
          e.currentTarget.className = 'active';
          console.log("鼠标移入了");
      },
      removeActive(e) {
          e.currentTarget.className = '';
          console.log("鼠标移出了");
      },
    }

style部分：
    .active{
    padding:1px;
    background-color: darkgrey!important;
    border-radius:2px;
    }

当鼠标移入的时候“新建”会出现填充色和边角被截取了等样式。