多个元素的css转换

Question

我对不同的元素有多个css转换。

在我的示例中，如果将鼠标悬停在圆形部分上，则会在圆形和底部的框颜色变化上进行转换。不过，如果你走出圈子，进入箱形截面，圆形过渡，不会发生

为完整的例子见琴：http://jsfiddle.net/Lsnbpt8r/

继承人我的html：

div class="row">    
     <div class="col-sm-4 text-center transistion"> 
      <div class="box"> 
      <i class="circle-pos circle glyphicon glyphicon-home icon"></i> 
       <h3 class="heading"> 
       Construction 
       </h3> 
       <p>This is how we do it</p> 
      </div> 
     </div> 

     <div class="col-sm-4 text-center transistion"> 
      <div class="box"> 
      <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i> 
       <h3 class="heading"> 
       Interior Design 
       </h3> 
       <p>This is how we do it</p> 
      </div> 
     </div> 

     <div class="col-sm-4 text-center transistion"> 
      <div class="box"> 
      <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i> 
       <h3 class="heading"> 
       Service 
       </h3> 
       <p>This is how we do it</p> 
      </div> 
     </div> 
     </div> 

下面是我的一些CSS：

.circle { 
     width: 120px; 
     height: 120px; 
     -moz-border-radius: 50%; 
     -webkit-border-radius: 50%; 
     border-radius: 50%; 
     background: #f3f3f3; 
      -webkit-transition: all 300ms linear; 
     -moz-transition: all 300ms linear; 
     -o-transition: all 300ms linear; 
     -ms-transition: all 300ms linear; 
     transition: all 300ms linear; 

    } 
     .circle:hover{ 
     width: 100px; 
     height: 100px; 
     background: #f7f7f7; 
     } 
    .box{ 
     border: 0px 1px 2px 1px solid #f1f1f1; 
     border-top: 5px solid #003176; 
     height: 200px; 
     -webkit-transition: all 300ms linear; 
     -moz-transition: all 300ms linear; 
     -o-transition: all 300ms linear; 
     -ms-transition: all 300ms linear; 
     transition: all 300ms linear; 
    } 
    .box:hover{ 
     background-color: #135379; 

    } 

我怎样才能让这个无论段的一部分悬停在所有元素的转变将发生？

提前欢呼。

Answer 1

这是因为效果应用到每个元素的:hover：

.circle:hover{ 
     width: 100px; 
     height: 100px; 
     background: #f7f7f7; 
} 

... 

.circle-pos:hover{ 
     margin-top: -50px; 
} 

所以，如果你悬停框，但不圆，也不会产生任何影响。相反，过渡设置为共同的父容器的:hover，在这种情况下，.box DIV：

Updated Fiddle

.box:hover .circle{ 
    width: 100px; 
    height: 100px; 
    background: #f7f7f7; 
} 

.... 

.box:hover .circle-pos{ 
    margin-top: -50px; 
} 

编辑

用，如果你想在.icon:hover {同样，它可以是.box:hover .icon{：http://jsfiddle.net/Lsnbpt8r/3/