使图像在 div:hover 上可见，但如果该 div 中的另一个图像悬停，则不可见？

Question

在我的photography portfolio 上，我设置了缩略图，因此当您将鼠标悬停在缩略图上时（实际上是带有背景图像设置为缩略图的 div），一个放大镜图标（这是一个绝对定位的 img）通过 CSS 设置为 opacity:1.0。

但是，对于某些图片，我将提供可供下载的壁纸（左上角的第一张图片是一个示例）。为了表明这一点，我将在这个 div 内（在对角）也有一个监视器图标（也是绝对定位的）。当这张图片悬停在上面时，我不希望出现放大镜图标。

编辑：

这是由 PHP 生成的实际 HTML：

<div class="thumbnail" style="width:240px; height:160px;">
  <a href="gallery/01_CONSTRUCTS/Steam.jpg" class="shadowbox[CONSTRUCTS]" title="Steam">
    <span class="rounded_corners thumb_back" style=" background-image:url('gallery/01_CONSTRUCTS/thumbs/Steam_thumb.jpg');">&nbsp;</span>
    <span class="rounded_corners hover_dim">&nbsp;</span>
    <img class="zoom" src="images/zoom.png" alt="Zoom" />
  </a>
  <img class="thumb_new" src="images/new.png" alt="New" />
  <a class="wall_hover" href="gallery/01_CONSTRUCTS/wallpaper/Steam.jpg">
    <img class="wallpaper" src="images/monitor.png" alt="DownloadWallpaper" />
  </a>
</div>

以及相关的 CSS：

.thumbnail {
  display: block;
  position: relative;
  float: left;
}

.thumbnail:hover, .thumbnail:hover .zoom {
  opacity: 1.0;
  -webkit-opacity: 1.0;
  -moz-opacity: 1.0;
}

.thumbnail a.wall_hover + a .zoom {
  display: none;
}

.thumb_new {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 100;
}

.zoom {
  position: absolute;
  bottom: 3px;
  right: 3px;
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
}

.hover_dim {
  background-color: rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: background-color .25s ease-in;
  -webkit-transition: background-color .25s ease-in;
  -moz-transition: background-color .25s ease-in;
}

.thumbnail:hover .hover_dim {
  background-color: rgba(0,0,0,0);
}

.wallpaper {
  position: absolute;
  bottom: 3px;
  left: 3px;
}

.rounded_corners {
  padding: 0;
  margin: 0 5px 5px 0;
  border: 0;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}

Answer 1

如果您的结构现在正确，这应该可以工作。与简的回答类似，只是需要.wall_hover:hover 而不是.wallpaper:hover。

.thumbnail:hover > .wall_hover:hover + .zoom {
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}

更新做你的休息

您确实需要了解一些有关 css 选择器实际在做什么的知识，否则您可能会再次破坏。所以，让我一起帮助教育。首先，您的“新”（截至目前）html 结构是这样的：

<div class="thumbnail" style="width:240px; height:160px;">
  <a class="shadowbox[CONSTRUCTS]" title="Steam" href="gallery/01_CONSTRUCTS/Steam.jpg">
    <span class="rounded_corners thumb_back" style=" background-image:url('gallery/01_CONSTRUCTS/thumbs/Steam_thumb.jpg');">&nbsp;</span>
   <span class="rounded_corners hover_dim">&nbsp;</span>
   <img class="thumb_new" alt="New Image" src="images/new.png">
   <img class="zoom" alt="Zoom In" src="images/zoom.png">
  </a>
  <a class="wall_hover" href="gallery/01_CONSTRUCTS/wallpaper/Steam.jpg">
    <img class="wallpaper" alt="Download Wallpaper" src="images/monitor.png">
  </a>
</div>

这将无法达到您想要的效果（无论如何，通过纯 css）。您必须“交换”a 标签上的位置。简短示例（为简洁起见删除了一些代码）：

  <a class="wall_hover">
    <img class="wallpaper" >
  </a>
  <a class="shadowbox[CONSTRUCTS]">
   <img class="zoom" />
  </a>

这样做的原因是css可以在内元素或在某些情况下跟随元素进行选择，但不能 前面的元素或 父 元素。这就是为什么 html 顺序必须改变的原因，因为你想用.wall_hover 影响.zoom。我们正在使用相邻的兄弟选择器+ 这样做，它只选择紧随其后的元素。所以现在，要让你的 CSS 工作，你需要：

.thumbnail:hover > .wall_hover:hover + .shadowbox[CONSTRUCTS] .zoom {
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}

请注意，更改是因为您将 .zoom 包装在父元素 shadowbox[CONSTRUCTS] 中。上面说的是：

当 .thumbnail 悬停时，转到其直接子级 (>) 那是.wall_hover的一个类，如果它被悬停，那么移动 到其紧邻的兄弟姐妹，如果那是 .shadowbox[CONSTRUCTS] 类，然后选择它的子元素 .zoom。您可以在 .zoom 之前添加 >，但在 你的情况（其实真的没必要在 .wall_hover 之前 你的情况也是如此，但我保留它是为了便于说明。

Answer 2

你可以用 CSS 和兄弟选择器来做到这一点，但前提是你要切换图像的顺序：

.thumbnail .wallpaper + .zoom {
    display: none;
}

正如我在您的网站中看到的，您的结构更为复杂。图像包含在a 标签内。您需要将兄弟选择器应用于 a 标记，如下所示：

.thumbnail a.wall_hover + a .zoom {
    display: none;
}

请注意，要使其正常工作，您需要将a.wall_hover 作为div 中的第一个链接。

还有另一种使用 jQuery 的替代方法，只需将这一行放在文档加载上：

$(".thumbnail").has(".wallpaper").find(".zoom").hide();

Answer 3

在 html 中将 .zoom 放在 .wallpaper 之后

<div class="thumbnail" style="background-image:url('img.jpg'); position:relative">
  <img src="monitor.jpg" class="wallpaper" />
  <img src="magnifying.jpg" class="zoom" />
</div>

所以 css 会

.thumbnail:hover > .wallpaper:hover + .zoom {
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}