Question

我只是在做一个小小的项目，并且在找出实现效果的最佳方法时遇到了一些麻烦，希望有人能指出我正确的方向。该网站是[编辑]，您可以查看[编辑]我目前使用的所有代码。代码块位于此帖的底部。

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

徘徊在我的身体上时，我身体上的不同图标立即消失。
将鼠标悬停在特定图标上时，该图标会变得更亮（更不透明）。
用户可以点击其中一个区域将会淡入其中一个区域。（这可能会用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>

Answer 1

快速回答是你需要使用z-index然后将hover类应用到元素以实现第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();
});

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

Answer 2

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

Live Example

点击“运行”，然后点击生成的链接进行检查。我知道您似乎正在尝试使用CSS，但对于这样的实例，可以在多个浏览器中更好地工作。 Jquery是一个更好的选择。

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

Answer 3

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

Answer 4

如果你绝对定位图像，你可以为每个图标添加一个元素并绝对定位。

即

等

这样，图标将最初一起淡入，然后在每个图标单独显示时突出显示。

显然，您必须更静态地调整图像大小。即身高：500px;而不是身高：100％;

尝试在可点击区域悬停时更改图像

4 个答案: