鼠标移入图片实现遮住层效果2种方法

    <div class="img-container"><img :src="imgObj.url" alt="图片"> </img><div class="overlay"></div></div>

1. css :hover时改变遮罩层清晰度

     img {width: 160px;height: 100px;object-fit: cover;border-radius: 4px;}.overlay {position: absolute;top: 0;width: 100%;height: 100%;border-radius: 4px;color: white;background-color: rgba(0, 0, 0, 0.5);opacity: 0;transition: opacity 0.3s ease;}
   }
   .overlay:hover{opacity: 1;
   }

2. 移入时使用v-if 展示遮罩层
    

       <div class="img-container" v-on:mouseenter="showOverlay=true" v-on:mouseleave="showOverlay=false"><img :src="imgObj.url" alt="图片"> </img><div class="overlay" v-if="showOverlay"></div></div>

   .img-container {position: relative;width: 160px;height: 100px;img {width: 160px;height: 100px;object-fit: cover;border-radius: 4px;}.overlay {position: absolute;top: 0;width: 100%;height: 100%;border-radius: 4px;color: white;background-color: rgba(0, 0, 0, 0.5);opacity: 0.5;transition: opacity 0.3s ease;}
   }