多个元素的css过渡答案

【问题标题】：css transition on multiple elements多个元素的css过渡
【发布时间】：2014-09-20 00:22:19
【问题描述】：

我在不同的元素上有多个 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;

    }

我怎样才能使该部分的任何部分悬停在所有元素转换上都会发生？

提前干杯。

【问题讨论】：

与此问题无关，但 div 类名称中有轻微的拼写错误。如果您在代码中的其他地方使用该类，它应该是“过渡”而不是“过渡”

标签： css css-transitions

【解决方案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/

【讨论】：

您忘记在过渡中包含图标。