Question

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

在我的示例中，如果将鼠标悬停在圆圈部分上，则圆圈和下方的框颜色变化都会发生过渡。但是，如果您离开圆圈并进入框部分，则不会发生圆形过渡

继承人我的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/

css在多个元素上的转换

1 个答案: