多个元素上的CSS过渡效果

Question

多个元素上的CSS过渡效果

3

我有多个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;

    }

我应该如何让鼠标悬停在某个部分时，所有元素的过渡效果都会发生变化？

提前感谢您的帮助。

- JamesP

与此问题无关，但是div类名中有一个小错误。如果您在代码的其他地方使用该类，则应该是“transition”，而不是“transistion”。 - mc01

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LcSalazar · Accepted Answer

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

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

...

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

因此，如果你将鼠标悬停在方框上，而不是圆圈上，它将没有任何效果。取而代之的是，将过渡效果设置为共同父容器（在本例中为.box div）的 :hover ：

更新的示例

.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/