CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Graeme Leighfield
Graeme Leighfield

Reputation: 3005

CSS3 Animations trigger others dom elements

I currently have some CSS3 animations that play in an infinite loop upon page load.

Is there a way, to trigger these manually - for example if I were to hover over another DOM element, without the need for Javascript/Jquery?

i.e -> hover over element a -> starts animations on DOM elements x,y,z

Many thanks in advance

Upvotes: 0

Views: 72

Answers (2)

Austin Mullins
Austin Mullins

Reputation: 7437

Your DOM would need to be set up so that x, y, and z are inside element a. Then you could do:

a:hover x,y,z {
    animation:yourAnimation 5s infinite;
}

Upvotes: 1

ahren
ahren

Reputation: 16959

You could set it up as a class in your CSS and then use javascript to trigger add/remove.

$('#element1').hover(function(){
  $('#element2').addClass('animate');
}, function(){
  $('#element2').removeClass('animate');
});

In order to hook into events, you're going to need Javascript.

Another way you could do it using pure CSS is to use the pseudo class :hover, but only if #element2 is a child of #element1.

#element1:hover #element2{
  /* Your animation */
}

Upvotes: 1

Related Questions