javascript - 试图让图像在悬停在可点击区域时发生变化

Question

我只是在做一个小元素，在想出实现效果的最佳方法时遇到了一些麻烦，希望有人能给我指出正确的方向。该网站是 [redacted]，您可以查看 [redacted] 以了解我目前使用的所有代码。代码块位于本文底部。

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

1. 将鼠标悬停在我的 body 上时，我整个 body 上的不同图标立即消失。

2. 将鼠标悬停在特定图标上时，该图标会变得更亮(更不透明)。

3. 用户可以单击这些区域之一，其他 div 将淡入。(这可能会使用 jquery 完成)

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

就像图像在悬停时从不可见变为不透明一样，我希望我能再创建一些自己的图像，每个图像都将突出显示。例如，当鼠标悬停在心脏上时，图像将被替换为我的新图像，它有一颗更明亮的心。

我想我的问题是我真的不知道实现此目标的最佳方法是什么。我希望我的解释已经清楚了，我真的很感激能得到一些帮助!图像 map 似乎不是解决方案(虽然我可能是错的)而且我读到它们已经过时了。这让我抓狂!

先谢谢大家，

帕特里克

    .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>

Answer 1

快速回答是您需要使用 z-index，然后将悬停类应用于元素以实现第 2 步。第 3 步显然需要一些 js....给我几分钟时间来玩弄 fiddle

更新

我无法让 javascript 立即运行而且我没有很多时间所以我会给你这个开始

http://jsfiddle.net/Et2Wp/2/

您正在将一张图片加载到另一张图片之上，而这将无法实现您想要完成的目标。您需要将每个元素创建为单独的元素并将它们绝对定位在您的 body 上。现在每个元素都由一个彩色方 block 表示，显然您可以使用您想要的元素的图像/背景图像来设置样式。

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

要实现第二步，您只需申请 :hover类到您想要的任何样式的每个元素 id

最后要实现第 3 步，您需要隐藏另一组 div(即 <div id="phoneContent")

使用 javascript 将它们带入点击事件，例如

$('#phone').click(function() {
 $('#phoneContent').slideToggle();
});

如果你还有问题，我可以稍后回来完成它，但我现在得跑，希望这对你有帮助