【问题标题】：Hovering an image in front of an image将图像悬停在图像前面
【发布时间】：2014-03-30 06:28:16
【问题描述】：

我是 html 和 css 的新用户，正在制作我的第一个网站。我正在尝试拍摄图像并将图像悬停在其上，但显示为不同的颜色。我阅读了与此类似的其他帖子，但仍然遇到困难。

这是我的html部分：

<div id= "silhouette_3">
    <img src= "images/silhouette_kickboxing.gif" />
</div>

这是css：

#silhouette_3 img
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#silhouette_3 img:hover 
{
  background-image: url('images/silhouette_kickboxing_color.gif');
  z-index: 100;
}

我认为我的问题之一是一张图片是背景图片，而另一张不是，但我不确定我还能尝试什么。任何帮助将不胜感激。非常感谢！

【问题讨论】：

标签： html css image hover webpage

【解决方案1】：

从技术上讲，您的代码可能有效，但是当您将鼠标悬停在背景图像上时，即使背景图像存在，它也不会显示，因为背景无法显示在其前景之上。您不能只在背景图像上设置 z-index，因为它不是一个单独的元素。

有很多方法可以做到这一点。您可以在 div 上设置背景图片，然后将其他图片设置为仅在您将鼠标悬停在其上时显示。

例如：

HTML：

<div id= "silhouette_3">
    <img src= "http://lorempixel.com/400/200/sports" />
</div>

CSS：

#silhouette_3
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-image: url("http://lorempixel.com/400/200/abstract");
  background-repeat: no-repeat;
}

#silhouette_3 img {
  visibility: hidden;
}

#silhouette_3:hover img {
  visibility: visible;
}

这样，CSS 中的背景图像是最初显示的图像，而 img 标记中的图像是当您将鼠标悬停在它上面时显示的图像。

我在 CodePen 创建了一个演示：http://codepen.io/Ghodmode/pen/foIhJ

更新：在我看来，图像更像是内容而不是演示，所以我宁愿将它们放在 HTML 中而不是 CSS 中。我更新了我的 CodePen 演示，让它有点不同。我更喜欢这种方式...

HTML：

<div id="silhouette_4">
  <img class="img1" src="http://lorempixel.com/400/200/city">
  <img class="img2" src="http://lorempixel.com/400/200/people">
</div>

CSS：

#silhouette_4 img {
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#silhouette_4 .img2 {
  display: none;
}

#silhouette_4:hover .img1 {
  display: none;
}

#silhouette_4:hover .img2 {
  display: inline-block;
}

【讨论】：

【解决方案2】：

第一张图片：

第二张图片：

CSS

#hovereffects:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Fiddle

你也可以查看这个Fiddle

【讨论】：

【解决方案3】：

您是对的，问题是其中一个图像是background-image 而另一个不是，您可以通过将彩色图像放在顶部并将默认图像设置为background-image 来修复它，然后使用opacity隐藏顶层（彩色图像）并最终在鼠标悬停时显示：

HTML：

<div id= "silhouette_3">
    <img src= "images/silhouette_kickboxing_color.gif" />
</div>

CSS：

#silhouette_3{
  background-image: url('images/silhouette_kickboxing.gif');
}
#silhouette_3 img
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
  opacity: 0;
}

#silhouette_3:hover img
{
  opacity: 1;
}

【讨论】：

【解决方案4】：

你说得对，images/silhouette_kickboxing_color.gif 是背景，但 <img src=".."/> 不是。

这是一个解决方案：

<div id= "silhouette_3">
    <img />
</div>

#silhouette_3 img
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-image: url('images/silhouette_kickboxing.gif');
}

#silhouette_3 img:hover 
{
  background-image: url('images/silhouette_kickboxing_color.gif');
  z-index: 100;
}

当img 实际上不再是图像时，我希望你应该用div 替换它。

【讨论】：