vue给li标签设置鼠标覆盖阴影样式

效果图:

这里鼠标覆盖加深阴影

代码如下:

重点 :class="{‘cover’:coverid==index?‘cover’:’’}"

   <li
              v-for="(item, index) in cellList"
              :key="index"
               :class="{'cover':coverid==index?'cover':''}"
              :style="{
				  'border-color': statusColor(item.status),
				   'color': statusColor(item.status)
				}"
			    id="devices_li"
		      	@mouseenter="item.type==1&&enters(item,index)" @mouseleave="item.type==1&&leaver(item,index)"  
		
            >

//鼠标移入
 enters(item,index) {
	        
			// console.log(item);
			// if(item.id==item.id){
				this.deviceListshow =false;
				this.deviceListshow2 = true; 	 //鼠标移入 首先是A先消失，然后B再出现的，写反就会疯狂闪。
				// }
		    	this.deviceIdshow=item.id;
				// console.log(this.deviceIdshow);
				this.coverid=index//这里传入index来判断是哪个li需要加入阴影样式
		
			
	      },
	      //鼠标移出
	      leaver(item,index) {
	      this.coverid='aa'  鼠标移除 设置值使id不相等 样式移除
			// if(item.id==item.id){
				this.deviceListshow2 = false;  //移出时也一样，先B消失 再出现A。
				this.deviceListshow = true;
				this.deviceIdshow=item.id;
				// }
	      },

data设置为文字 始终不等于index 这样就不会鼠标还没移入时就出现样式了

最后就是阴影样式了

.cover{
		box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
						0px 0px 20px rgba(0,0,0,0.3) inset;
	}