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;
}

Answer 2

当需要隐藏内容时（如果您的案例中没有替代文字），请尝试将类添加到父li。然后使用CSS显示/隐藏您喜欢的元素。

隐藏图像及其叠加层

2 个答案: