Question

如何在一个悬停触发器上获得多个div来转换/动画？

请参阅此处的更新：http://jsfiddle.net/hecyn/9/＆gt;＆gt; CSS-线：23 我想要的就是让.inner和.wrap2在一个.wrap上旋转：悬停。当我添加“+”选择器时，它不起作用。我怎样才能更好地改善这一点。

主要问题：我只能在下面写这个：

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

关于这个问题：

如何在一个悬停上获得多个div来转换/动画触发？

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

http://jsfiddle.net/ow86d5vg/

Answer 2

这样的事情？

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>

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

2 个答案: