Question

I have image A and image B. They are located in the different places on the page. When hovering over image A there is a css animation attached. I’d like to attach and trigger same animation for the image B, when hovering over image A. Is it possible with CSS? Should I better use jQuery? And if jQuery then how to trigger a css animation on the element?

Answer 1

This cannot be done with just CSS. There are some ways of doing this, but not certain on the cross-browser support available.

If you wish for animation to occur on ImageB while hovering ImageA, you will require jQuery.

You mention CSS animation on hover. Therefore I assume you mean different styles for the psuedo state?:

.imageA:hover
{
   //styles
}

This could be changed to:

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

Now you can apply the hoverAnimation class to ImageB while hovering over ImageA using jQuery:

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

— DEMO —