jquery - CSS:从一个元素到另一个元素的链接效果

Question

我有图像 A 和图像 B。它们位于页面上的不同位置。将鼠标悬停在图像 A 上时，会附加一个 CSS 动画。当鼠标悬停在图像 A 上时，我想为图像 B 附加并触发相同的动画。CSS 是否可行？我应该更好地使用 jQuery 吗？如果使用 jQuery 那么如何在元素上触发 css 动画？

Answer 1

这不能只用 CSS 来完成。 有 some ways of doing this ，但不确定是否提供跨浏览器支持。

如果您希望在悬停 ImageA 时在 ImageB 上出现动画，您将需要 jQuery。

您提到悬停时的 CSS 动画。因此，我假设您指的是伪状态的不同样式？

.imageA:hover
{
   //styles
}

这可以更改为:

.imageA:hover, .hoverAnimation
{
   //styles
}

现在您可以在将鼠标悬停在 ImageA 上时使用 jQuery 将 hoverAnimation 类应用于 ImageB:

$(function(){
  $("img.imageA").hover(function(){
     $("img.ImageB").addClass("hoverAnimation");
  }
  ,function(){
     $("img.ImageB").removeClass("hoverAnimation");
  });
});

-- DEMO --