html - 隐藏图像及其覆盖

Question

我有一张图片，只有当它的 ALT 属性中包含某些内容时才会显示。这适用于:

  img.video[alt=""] {
    display:none;
    height:0px;
}

但是我希望图像也有一个叠加层，该叠加层也会消失...叠加层是一个播放按钮，但它会保留。

          <li>
            <img class="video" src="<?php echo $row_rs_dealItem['imagemain']; ?>" alt="<?php echo $row_rs_dealItem['video']; ?>">
              <img id="videoLogo" src="images/video.png"/>
            </img>
          </li>

有没有更好的办法解决这个问题？

谢谢大家

Answer 1

是的，有，你必须使用 adjacent sibling选择器，因为 img 元素不能有子元素。

HTML :

<li>
    <img class="video" src="..."   alt="...">
    <img class=v src="images/video.png">
 </li>

还有 CSS:

img.video[alt=""], img.video[alt=""] + img.v {
    display:none;
    height:0px;
}