效果图:
这里鼠标覆盖加深阴影
代码如下:
重点 :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; }
