vue使用@mouseenter和@mouseleave事件，没有效果的原因

最近在写代码时，有个需求是，需要通过鼠标移入的时候，通过条件判断是否显示删除图标按钮。
这时候就需要在删除图标上，绑定鼠标移入@mouseenter，鼠标移除@mouseleave事件来搞定需求。

问题：

在图标上直接绑定@mouseenter，@mouseleave，编写函数。运行后发现并没有效果，控制台没有看到输出。

html:

js:

**

解决：

**

@mouseenter @mouseleave要绑定在父元素上

查阅了原生的js事件，发现 onmouseenter事件不支持冒泡，子元素不会触发。
onmouseover事件则可以，父子元素都会触发

此外也有可能是，使用到了组件如element-ui，想要在el-xxx上面绑定@mouseenter
需要加native修饰符,给组件绑定原生事件

   <el-button type="primary" @mouseenter.native="mouseenter( )" @click="trialBalanceModal=false">
            {{ $t('button.ok') }}
   </el-button>