react、vue鼠标浮上显示遮罩层

需求：鼠标浮在盒子上出现一层遮罩，如下图阿里巴巴的iconfont所示：

代码：这里使用的是react，但是vue改一下class就可以

// html
    <div className={Style.iconContainer}>
      <ul className={Style.horizontalList}>
        {tableData.map((item) => {
          return (
            <li key={item.id}>
              <div className={Style.iconTwrap}>
                <img className={Style.image} src={item.filePath}  />
              </div>
              <span className={Style.iconName}>{item.fileName}</span>
              {/* 遮罩层 */}
              <div className={Style.masker}>
              <div className={Style.maskBtn}  onClick={() => deleteIconFile(item)} ><DeleteOutlined className={Style.maskIcon} style={{fontSize: '24px'}}/></div>
                <div className={Style.maskBtn}  onClick={() => onDownload(item)} ><DownloadOutlined className={Style.maskIcon} style={{fontSize: '34px'}}/></div>
              </div>
            </li>
          )
        })}
        
      </ul>
    </div>

// css
  .iconContainer {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    margin-top: 20px;
    overflow-x: hidden;
    .horizontalList {
      list-style-type: none;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-gap: 26px 30px;
      color: #666;
    }
    .horizontalList li {
      width: 100px;
      height: 110px;
      text-align: center;
      position: relative;
      overflow: visible;
      border: 1px dashed transparent;
      border-radius: 5px;
      .iconTwrap {
        display: inline-block;
        margin-top: 18px;
        .image {
          width: 50px;
          height: 50px;
          vertical-align: middle;
          fill: currentColor;
          overflow: hidden;
        }
      }
      .iconName {
        display: block;
        width: 100%;
        height: 20px;
        line-height: 20px;
        color: #666;
        font-size: 12px;
        text-align: center;
        margin-top: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .horizontalList li:hover .masker {
      display: block;
    }
    .horizontalList li .masker {
      width: 100%;
      height: 100%;
      background: #252245;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      display: none;
      overflow: hidden;
      vertical-align: middle;
      border-radius: 5px;
      .maskBtn {
        width: 100%;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
      }
      .maskBtn:hover {
        background-color: #0d0a31;
        .maskIcon {
          color: #09e3e5;
        }
      }
      
    }
  }