CSS选择器-一次触发即可播放多个动画

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.

Answer 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/

Answer 2

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>