转载自：基于vue中对鼠标划过事件的处理方式详解

vue中鼠标划过监听事件：mouseover、mouseout、mousemove、mouseenter、mouseleave

一、传统（类似于js/jq）方式，获取元素dom信息，修改style

示例：
<ul>
    <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
    </li>
</ul>


methods:{
    // 鼠标移入加入class、也可直接修改style
    changeActive($event){
        $event.currentTarget.className="active";
    },
    removeActive($event){
        $event.currentTarget.className="";
    }
}

二、元素绑定ref属性，若元素是多个并列，ref属性可以绑定index区分

<template>
 <el-table
 :data="tableData"
 stripe
 style="width: 100%">
 <el-table-column
  prop="pic"
  label="图片"
  width="180">
  <template slot-scope="scope">
   <div slot="wrapper" class="name-wrapper">
   <div class="img-mask" @click="toShowDialog(props.row)" :ref="'mask' + props.rowIndex">文字</div>
   <div @mouseover="changeMask(props.rowIndex)" @mouseout="changeMask(props.rowIndex)">
    <img src="...">
   </div>
   </div>
  </template>
 </el-table-column>
 </el-table>
</template>

...
changeMask(index) {
 let vm = this;
 let mask = vm.$refs['mask' + index];

 if(mask.style.display == 'none') {
 mask.style.display = 'block';
 }else {
 mask.style.display = 'none';
 }
}

三、css实现（通用）

css选择器:hover 选定需要操作的元素，opacity属性控制显隐

示例：// 这里使用sass-css扩展语言，也可以用普通的css写法
.wrapper {
    position: relative;
    .img-mask {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
 //设置left、right、top、bottom的原因是使得遮罩层上的文字显示在该层的最中间
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
 //透明度为0，则就是不可见
        opacity: 0;
    }
    &:hover {
        .img-mask {
            opacity: 1;
        }
    }
}