CSS Selectors - Multiple animations on one trigger

Question

How can I get multiple divs to transition/animate on one hover trigger?

See the update here: http://jsfiddle.net/hecyn/9/ >> CSS-Line:23 All I'm trying to here, is to get .inner and .wrap2 to rotate on one .wrap:hover. Its not working, when I add the "+" selector. How can I right this better.

Primary Question: So simply how can I write this below:

#container:hover + #cube1 + #cube2 + #cube3 { background-color: yellow; }

Second question: Above would be ok, but ultimately Im kinda trying to achieve this via CSS:

#:hoverOverSomething then{
   Do this thing;
   Do this other thing;
   Do this next thing;
}

Bear with me, little new to CSS animations... and the net is clouded and without specific simple information. Cheers.

You can try keyframe animation. Please take a look to see whether this is something you need: jsfiddle.net/maLt4dda . Documentation: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes — Khanh TO
– Khanh TO, Commented Oct 3, 2015 at 9:01
Animating/transitioning multiple elements while hovering on another can be done but it depends on where the elements to be animated are with respect to the element that has the hover. They need to be siblings or children. You would get better answers if you post your exact markup, indicate which elements need to be animated etc than the generic do this, do that. — Harry
– Harry, Commented Oct 3, 2015 at 9:20
@Harry See the update here: jsfiddle.net/hecyn/9 >> CSS-Line:23 All im trying to here, is to get .inner and .wrap2 to rotate on one .wrap:hover. Its not working, when I add the "+" selector. How can I right this better. — fhonics
– fhonics, Commented Oct 3, 2015 at 9:32

Khanh TO · Accepted Answer · 2015-10-03 09:35:23Z

1

I think you could try keyframes animation: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Something like this:

.wrap:hover {
    animation: test-animation 2s linear;
}

@keyframes test-animation {
  //You can add as many ranges as you like from 0% to 100%
  0%   { opacity: 0; }
  50%   { transform: scale(1.5); }
  100% { opacity: 1; }
}

https://jsfiddle.net/maLt4dda/

Regarding the question:

How can I get multiple divs to transition/animate on one hover trigger?

Your idea is fine, but there is one mistake in the code. It should be .wrap:hover .inner,.wrap:hover + .wrap2 instead of .wrap:hover .inner + .wrap2

http://jsfiddle.net/ow86d5vg/

edited Oct 3, 2015 at 9:35

answered Oct 3, 2015 at 9:06

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

billy · Accepted Answer · 2015-10-03 09:56:21Z

0

something like this ?

div{width:100px;height:50px;background-color:red;border:1px solid black;margin:2px;}
#container:hover ~.hover  { background-color: yellow; }

<div id="container"class="hover">Container</div>
<div id="cube1" class="hover">Cube 1</div>
<div id="cube2" class="hover">Cube 2</div>
<div id="cube3" class="hover">Cube 3</div>

answered Oct 3, 2015 at 9:56

billy

1

Collectives™ on Stack Overflow

CSS Selectors - Multiple animations on one trigger

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related