CSS 鼠标悬浮在图片上添加遮罩层效果的实现

实现的关键是 CSS 的 opacity 和 hover，本文也主要介绍遮罩层的实现 

父级元素 sub-module-type 要display: block;position: relative;
子级元素 mask 遮罩层 position: absolute;opacity: 0;pointer-events:none;
鼠标悬浮时 opacity: 1;

后来添加了3个按钮，发现点击事件不触发，在子级元素 mask 上加pointer-events:none;，在div上加pointer-events:auto样式还是没有触发，最后在div上写内联样式style="pointer-events:auto",就可以了

  <div class="sub-module">
          <div class="sub-module-type">
            <div class="body">
              <p>222222</p>
            </div>
            <div class="check">
              <el-checkbox v-model="checked">备选项</el-checkbox>
            </div>
            <div class="mask">
            <div type="text" @click="preview" style="pointer-events:auto;">预览</div>
            <div type="text" @click="edit" style="pointer-events:auto;">编辑</div>
            <div type="text" @click="del" style="pointer-events:auto;">删除</div>
          </div>
          </div>
        </div>



// css
.sub-module{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
&-type{
      display: flex;
      flex-direction: column;
      position: relative;
      .body{
        border-radius: 4px;
        width: 178px;
        height: 200px;
        background: #F7F7FA;
      }
      .check{
        display: flex;
        justify-content: center;
        margin-top: 8px;
      }
      .mask{
       position: absolute;
        width: 178px;
        height: 200px;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 4px;
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events:none;
        div{
          color: #FFFFFF;
          font-size: 14px;
          height: 22px;
          line-height: 22px;
          margin-top: 12px;
        }
      }
    }
    &-type:hover .mask {
      opacity: 1;
    }
}

 

 <div class="item-icons">
            <div
              class="icon-item-small"
              v-for="(icon, index) in item.icons"
              :key="index"
            >
              <vp-icon :name="icon.url" size="2rem" />
              <!--              <img :src="icon.url" id="girlImg"/>-->
              <div class="nav-icon_name">{{ icon.name }}</div>
              <div class="icon-mask">
                <a-tooltip placement="bottom" overlayClassName="draw_atooltip">
                  <template slot="title">
                    <span>复制svg代码</span>
                  </template>
                  <a-icon
                    type="copy"
                    class="icon-copy"
                    @click="handleCopy(icon.url)"
                  />
                </a-tooltip>
              </div>
            </div>
</div>


// css
.item-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 30px;
}
.icon-item-small {
    border: 1px solid #F0F0F0;
    width: 117px;
    height: 128px;
    margin-right: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 24px;
}

.nav-icon_name {
    padding-top: 20px;
}
.icon-mask {
    border-radius: 12px;
    width: 117px;
    height: 128px;
    position: absolute;
    opacity: 0;
    background: rgba(4, 20, 41, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 100;
}

.icon-item-small:hover .icon-mask {
    opacity: 1;
    cursor: default;
}
.icon-copy {
    color: #AAAAAA;
    text-align: center;
    border-radius: 12px;
    width: 117px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}