Question

所以，我有这个项目要为学校做，并且从Reveal image underneath a mask css/javascript部分得到答案，这很棒。

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

非常感谢！

Answer 1

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

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

Answer 2

正如马丁所说，你可以根据你的悬停情况简单地改变背景颜色。但是，如果您将鼠标悬停在不同的颜色上（颜色将在完成动画之前切换），则可能会出现问题。

如果你有这样的标记：

<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

将鼠标悬停在图像上，以便其他悬停图像可以执行动画

2 个答案: