鼠标移入图片实现遮住层效果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;
     }
   }