html - 在鼠标悬停时激活更多的一个过渡

Question

在我的 CSS 中，我有 3 个齿轮，我希望当我悬停其中一个齿轮时，其他 2 个齿轮也会被激活。

我的代码:

CSS

#box_1{
   border: 1px solid red;
   display: block;
   position: relative !important;
   width: 200px;
   height: 200px;
}

.object1 {
   position: absolute !important;
}
.cog1 {
   top: 18%;
   left: 5%;
}

.object2 {
   position: absolute !important;
}
.cog2 {
   top: 8%;
   left: 54%;
}

.object3 {
   position: absolute !important;
}
.cog3 {
   top: 60%;
   left: 54%;
}

.object1 {
   position: absolute;
   transition: all 20s ease-in;
   -webkit-transition: all 20s ease-in; /** Chrome & Safari **/
   -moz-transition: all 20s ease-in; /** Firefox **/
   -o-transition: all 20s ease-in; /** Opera **/
}

#axis1:hover .rotate360cw {
   transform: rotate(3600deg);
   -webkit-transform: rotate(3600deg);
   -o-transform: rotate(3600deg);
   -moz-transform: rotate(3600deg);
}

.object2 {
   position: absolute;
   transition: all 2s ease-in-out;
   -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
   -moz-transition: all 2s ease-in-out; /** Firefox **/
   -o-transition: all 2s ease-in-out; /** Opera **/
}

#axis2:hover .rotate360cw {
   transform: rotate(-360deg);
   -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
   -moz-transform: rotate(-360deg);
}

.object3 {
   position: absolute;
   transition: all 2s ease-in-out;
   -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
   -moz-transition: all 2s ease-in-out; /** Firefox **/
   -o-transition: all 2s ease-in-out; /** Opera **/
}

#axis3:hover .rotate360cw {
   transform: rotate(-360deg);
   -webkit-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
   -moz-transform: rotate(-360deg);
}

HTML

<div id="box_1">
<div id="axis1"><img class="object1 cog1 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg.png" width="128" height="128" /></div>
<div id="axis2"><img class="object2 cog2 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg1-e1390559689165.png" width="64" height="64" /></div>
<div id="axis3"><img class="object3 cog3 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg2-e1390559748608.png" width="64" height="64" /></div>
</div>

在 fiddle here 中检查这个.

我怎样才能做到这一点？

Answer 1

尝试将其添加到您的 CSS 中

#box_1:hover .rotate360cw {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);

}

不是 100% 那是你想要的结果。

DEMO

和平。