Css 使图像在div上可见：悬停，但在该div中的另一个图像悬停时不显示？

在我的上，我设置了缩略图，这样当您将鼠标悬停在缩略图上（实际上是背景图像设置为缩略图的div）时，通过CSS将放大镜图标（绝对定位的img）设置为不透明度：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>

---

在html中放置.缩放.壁纸

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

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

---

您可以使用CSS和同级选择器执行此操作，但前提是切换图像的顺序：

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

正如我在你的网站上看到的，你有一个更复杂的结构。图像包含在

a

标签中。您需要将同级选择器应用于

a

标记，如下所示：

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

请注意，要使其工作，您需要将

a.wall\u hover

作为

div

中的第一个链接

使用jQuery还有另一种选择，只需将这一行放在文档加载上：

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

---

如果您的结构现在是正确的，这应该可以工作。它与Jane的答案类似，只是需要是

。wall\u hover:hover

而不是

。wallper: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可以在元素内或在某些情况下选择以下元素，但不能选择前面的元素或父元素。这就是html顺序必须更改的原因，因为您希望使用

.wall\u hover

影响

.zoom

。我们使用相邻的同级选择器

+

来实现这一点，它只选择紧跟其后的元素。现在，要使css正常工作，您需要：

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

注意，更改是因为您将

.zoom

包装在父元素

阴影框[构造]

中。上面所说的是：

悬停.thumbnail时，转到其直接子项（） 这是一类.wall\u hover，如果它正在悬停，则移动 它的相邻兄弟姐妹，如果是 .shadowbox[构造]类，然后选择其子元素 .zoom。您可以在.zoom之前添加，但在中不需要 您的案例（实际上，在.wall\u悬停之前确实没有必要 你的案子也是，但我留着它是为了举例说明

---

@NaOH这不起作用，因为你在问题中放置的HTML不是你在网站中的HTML。如果它实际上是你正在使用的HTML，这会起作用。你需要编辑你的问题，以准确反映你的页面结构，这样你就不会在不知道为什么的情况下得到显然不起作用的答案。@BoltClock抱歉，哈我现在已经这么做了。废话，打破它修复了一些导致IE出现问题的语义问题。你认为你可以再看一看吗？谢谢！Scott，非常感谢。这是我第一次完全从头开始设计，所以在大多数情况下，我从来没有想过这一点。谢谢你的教育。：）事实上，稍加修改；现在，选择器是

.thumboil:hover>.wall\u hover:hover+a[class*='shadowbox']。zoom

，因为每个相册的shadowbox[]类不同。不过，这很有魅力，我现在对这些选择器是如何组合在一起的有了更好的理解，所以如果我再次更改语义，我应该能够应付。再次感谢你！

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

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