将鼠标悬停在图像上，以便另一个悬停图像可以执行动画答案

【问题标题】：Hover over an image so that another hover image can perform an animate将鼠标悬停在图像上，以便另一个悬停图像可以执行动画
【发布时间】：2013-08-08 16:38:36
【问题描述】：

所以，我有这个项目要为学校做，我的部分答案来自Reveal image underneath a mask css/javascript，这太棒了。

问题是，当我将鼠标指向玻璃时，我不希望颜色移动。相反，如果我有 5 个不同颜色的小缩略图（在玻璃侧面列出），当我指向它们中的每一个时，那将是玻璃中移动的颜色。那可能吗？有人能帮帮我吗？

非常感谢！

【问题讨论】：

你说的是什么玻璃？这看起来像什么？我们想提供帮助，但您必须向我们提供足够的详细信息，以便我们能够提供帮助。
他指的是这里的玻璃jsfiddle.net/videsignz/SptRr/7

标签： javascript

【解决方案1】：

正如 Martin 所说，您可以根据悬停的内容简单地更改背景颜色。但是，如果您随后将鼠标悬停在不同的颜色上，这可能会有点问题（颜色将在完成动画之前切换）。

如果你有这样的标记：

<img src='http://www.videsignz.com/testing/images/water-front2.png' />
  <div id="blue-fill"></div>
  <div id="red-fill"></div>
  <div id="green-fill"></div>

<div class="thumbnails">
  <div id="blue"></div>
  <div id="red"></div>
  <div id="green"></div>
</div>

而且你可以在你的函数中使用这行jQuery来获取对应的元素

      var theFill = "#" + $(this).attr("id") + "-fill";

这基本上是抓取当前悬停元素的 id 并连接填充选择器的格式。

然后您可以使用

抓取选择填充

$(theFill)

并从那里开始制作动画。我制作了一个带有类属性和样式所需 css 的 codepen 示例：http://codepen.io/prythm/pen/Lwoyd

【讨论】：

非常感谢。我明白了。
我还有其他一些问题，您介意给我发电子邮件至 love2le@yahoo.com 吗？？？
如果与问题有关，请在此处发布？如果它有效，你能接受我的回答吗？
再次感谢您。除此之外，我的下一步是，如果我有一张飞行气球的图片（位于图像上的不同位置）并且侧面几乎没有图案缩略图而不是颜色值，该怎么办。那么，我怎样才能将鼠标悬停在其中一个图案上，整个气球变成那个图案，当我将鼠标移到下一个图案上时，会发生同样的事情，就像你做玻璃一样。唯一不同的是现在我有不同的空间要填充，“填充”实际上是图案而不是颜色值。
所以，我已经玩过了并得到了这个。我创建了一个没有填充的气球图像（PNG 文件）。然后我创建了另一个带有填充图案的图像（JPEG 文件）。然后我创建了动画函数，当鼠标移到空气球上时，填充的气球图像将在该空图像下方进行动画处理，因此我的空气球现在充满了图案。我试图制造的错觉。

【解决方案2】：

基本上，您需要更改作为水“动画”的 div 的颜色。您可以使用附加到某些显示对象上的事件的$("div").css("background-color", color); 轻松完成此操作（在您的情况下为 5 个小缩略图）。

这是一个小例子@JSFiddle：http://jsfiddle.net/MartinTale/Mz6VH/1/

【讨论】：