html - CSS 选择器 - 一个触发器上的多个动画

Question

如何让多个 div 在一个悬停触发器上进行过渡/动画？

请在此处查看更新:http://jsfiddle.net/hecyn/9/ >> CSS 行:23我在这里要做的就是让 .inner 和 .wrap2 在一个 .wrap:hover 上旋转。当我添加“+”选择器时，它不起作用。我怎样才能更好地解决这个问题。

主要问题:简单地说，我怎样才能在下面写这个:

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

第二个问题:上面的没问题，但最终我有点想通过 CSS 来实现:

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

请耐心等待，CSS 动画的新手……网络上一片乌云，没有具体的简单信息。干杯。

Answer 1

我想你可以试试关键帧动画:https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

像这样:

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

关于问题:

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

你的想法很好，但是代码中有一个错误。它应该是 .wrap:hover .inner,.wrap:hover + .wrap2 而不是 .wrap:hover .inner + .wrap2

http://jsfiddle.net/ow86d5vg/