Javascript 尝试在鼠标悬停在可单击区域时更改图像

我只是在做一个小的辅助项目，我很难找到达到效果的最佳方法，希望有人能给我指出正确的方向。该网站是[修订版]，您可以查看[修订版]中我迄今为止使用的所有代码。一个代码块位于这篇文章的底部

这是一个非常简单的概念，我希望它的工作方式是：

在我的身体上盘旋时，我整个身体上的不同图标立即消失

当鼠标悬停在特定图标上时，该图标会变得更亮（更不透明）

用户可以单击其中一个区域，其他div将淡入其中。（这可能会通过jquery完成）

如您所见，步骤1正在工作。我目前有两张图片，一张是普通的，另一张包含我希望访问者能够悬停在上面并与之交互的所有功能。它们绝对位于彼此之上，其中一个在悬停之前是看不见的

就像悬停时从看不见变为不透明的图像一样，我希望我能为自己创建更多的图像，每一个突出显示的特征对应一个。例如，当鼠标悬停在心脏上方时，图像将被具有更明亮心脏的我的新图像替换

我想我的问题是，我真的不知道实现这一目标的最佳方式是什么。我希望我的解释已经很清楚了，我真的很感谢你的帮助！图像地图似乎不是解决方案（虽然我可能错了），我读到它们已经相当过时了。这让我快发疯了

提前谢谢大家,

帕特里克

    .fade {
     opacity: 0;
     transition: opacity .25s ease;
     -moz-transition: opacity .25s ease;
     -webkit-transition: opacity .25s ease;
     }
    .fade:hover {
     opacity: 1;
     }
    <div style="height:100%">
      [redacted]   
    </div>

.fade{
不透明度：0；
过渡：不透明度。25秒缓解；
-moz过渡：不透明度。25秒缓解；
-webkit过渡：不透明度。25秒轻松；
}
.消失：悬停{
不透明度：1；
}
[修订]

快速回答是，您需要使用z-index，然后对元素应用悬停类以实现步骤2。步骤3显然需要一些js。。。。给我几分钟时间摆弄一下小提琴

更新

我不能让javascript立即工作，我没有很多时间，所以我给你这个开始

您正在将一个图像加载到另一个图像的顶部，而这对于您试图完成的任务来说是行不通的。你需要把每一个项目作为一个单独的元素来创建，并将它们绝对地放置在你的身体上。每个元素现在都由一个彩色正方形表示，显然，您应该使用所需项目的图像/背景图像来设置其样式

我在淡入的每个元素上都有一个主类，这样您就可以应用css display:none，然后使用javascript将它们全部淡入悬停状态

要实现第二步，您只需将

：hover

类应用于所需样式的每个元素ID

---

最后，为了实现第3步，您需要隐藏另一组div（即，

），快速回答是您需要使用z-index，然后对元素应用一个hover类来实现第2步。第3步显然需要一些js…给我几分钟时间来摆弄一下小提琴

更新

我不能让javascript立即工作，我没有很多时间，所以我给你这个开始


您正在将一个图像加载到另一个图像的顶部，而这对您试图完成的工作不起作用。您需要将每个项目创建为一个单独的元素，并将它们绝对放置在您的身体上。每个元素现在都由一个彩色正方形表示，显然您会使用所需项目的图像/背景图像来设置样式

我在淡入的每个元素上都有一个主类，这样您就可以应用css display:none，然后使用javascript将它们全部淡入悬停状态

要实现第二步，您只需将
：hover
类应用于所需样式的每个元素ID

最后，为了实现第3步，您需要隐藏另一组div（即，您可以在这里看到，将鼠标悬停在Jquery上）


只需点击run并单击生成的链接即可查看。我知道看起来您正在尝试使用CSS，但对于这样的实例，可以更好地跨多个浏览器工作。Jquery是一个更好的选择

您可以看到图像在悬停时显示，在悬停关闭时消失。
您可以在这里看到，使用Jquery悬停打开


只需点击run并单击生成的链接即可查看。我知道看起来您正在尝试使用CSS，但对于这样的实例，可以更好地跨多个浏览器工作。Jquery是一个更好的选择

您可以看到图像在悬停状态下显示，在悬停状态下消失。
您这样做是错误的。每个图标都应该是一个单独的元素（带背景的img或div）。然后您可以轻松地执行任何喜欢的效果。
您这样做是错误的。每个图标都应该是一个单独的元素（带背景的img或div）。然后您可以轻松地执行任何您喜欢的效果。
如果您绝对定位图像，您可以为每个图标添加一个元素并绝对定位它们

即



等等

这样一来，图标最初会一起淡入淡出，然后在您分别覆盖每个图标时高亮显示

显然，您必须更静态地调整图像的大小。即高度：500px；而不是高度：100%；
如果您绝对定位图像，您可以为每个图标添加一个元素并绝对定位它们

即



等等

这样一来，图标最初会一起淡入淡出，然后在您分别覆盖每个图标时高亮显示

显然，您必须更静态地调整图像的大小。即高度：500px；而不是高度：100%；
嘿，谢谢您的回复！嗯，听起来像是li
$('#phone').click(function() {
 $('#phoneContent').slideToggle();
});