多個元素的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/