0

在我的摄影作品集上，我设置了缩略图，因此当您将鼠标悬停在缩略图（实际上是背景图像设置为缩略图的 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>

以及相关的 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;
}
4

3 回答 3

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 顺序必须改变，因为你想影响.zoom. .wall_hover我们使用相邻的兄弟选择器来做到这一点，它只选择紧随其后+的元素。所以现在，要让你的 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之前也确实没有必要，但我保留它是为了便于说明。

于 2012-07-19T16:12:00.533 回答
0

在您的 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;
}
于 2012-07-18T06:31:35.140 回答
0

您可以使用带有兄弟选择器的 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();
于 2012-07-18T06:50:46.890 回答