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

Trying to get images to change upon hover with clickable areas

本文关键字：区域 图像 单击 悬停      更新时间：2023-09-26

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

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

  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>

快速回答是，您需要使用 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();
});

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

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

现场示例

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

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

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

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

即


等。

这样，图标

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

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

相关文章：