css在多个元素上的转换

Question

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

在我的示例中，如果您将鼠标悬停在圆部分上，则圆和下面的框颜色都会发生转换。然而，如果你走出圆圈进入方框部分，圆圈转换不会发生

完整示例请参见fiddle：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，在本例中为.boxdiv:

更新的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/