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

Question

所以，我有这个项目要为学校做，并且部分从蒙版 css/javascript 下的 Reveal 图像中得到了我的答案，这太棒了。

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

非常感谢！

Answer 1

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

如果你有这样的标记：

<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

Answer 2

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

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