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>

在小提琴here处查看。

我怎样才能实现这个目标？

Answer 1

添加，例如：

#axis1:hover ~ div > img {
    -webkit-transform: rotate(-360deg) !important;
}

#axis2:hover ~ div > img也可以这样做。遗憾的是CSS无法提升，因此您无法声明从cog2到cog1或从cog3到cog2 / cog1的规则。这只能通过JavaScript解决。

Answer 2

尝试将添加到您的css

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

}

不是100％，这就是你想要的结果。

DEMO

和平。

Answer 3

您无法使用siblin选择器对此进行归档，因为您无法在CSS中上升（在悬停.cog3时不会影响.cog1。）

一个想法是给容器提供效果触发器：

#box1:hover img[class*="cog"] {

niceHoverEffect

}

在鼠标悬停时激活更多的一次转换

3 个答案: