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

是的，有，你必须使用相邻的兄弟选择器，因为 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;
}

Answer 2

当需要隐藏内容时（如果您的情况没有替代文本），请尝试向父 li 添加一个类。然后使用 CSS 显示/隐藏你喜欢的元素。