1

我只是在做一个小项目，在找出实现效果的最佳方法时遇到了一些麻烦，希望有人能指出我正确的方向。该网站是 [redacted]，您可以查看 [redacted] 我迄今为止使用的所有代码。代码块位于这篇文章的底部。

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

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

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

  3. 用户可以单击其他 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>
4

4 回答 4

1

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

更新

我无法立即让 javascript 工作而且我没有太多时间，所以我给你这个开始

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

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

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

要实现第二步，您只需将一个:hover类应用于您想要的任何样式的每个元素 id

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

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

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

如果您仍有问题，我可以稍后再回来完成它，但我现在必须运行，希望这会有所帮助

于 2013-11-07T00:49:44.210 回答
0

你这样做是错误的。每个图标应该是一个单独的元素（img 或带背景的 div）。然后你可以轻松地做任何你喜欢的效果。

于 2013-11-07T01:12:35.043 回答
0

你可以在这里看到，悬停在 Jquery 上。

现场示例

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

您可以看到图像在悬停时出现并在悬停时消失。

于 2013-11-07T00:59:06.987 回答
0

如果您要绝对定位图像，则可以为每个图标添加一个元素并绝对定位它们。

IE


等等

这样，这些图标最初都会一起淡入淡出，然后在您分别结束时突出显示。

显然，您必须更静态地调整图像的大小。即高度：500px；而不是高度：100%；

于 2013-11-07T01:14:46.113 回答