css过渡的多个元素 [英] css transition on multiple elements

问题描述

我在不同的元素有多个css过渡。

I have multiple css transitions on different elements.

在我的示例中，如果您将鼠标悬停在圆形部分上，则圆形和下面的框颜色更改都会发生转换。

In my example, if you hover over the circle section the transitions occur on both the circle and the box color change underneath. However if you come out of the circle and into the box section, the circle transition does not occur

请参阅fiddle的完整范例： http://jsfiddle.net/Lsnbpt8r/

See fiddle for complete example: 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：

Here's some of my 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;

    }

如何做到这一点，是否在所有元素转换上悬停？

How can I make it so that whatever part of the section is hovered on all element transitions will take place ?

提前提醒。

推荐答案

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

It's because the effects are applied to each element's :hover:

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

...

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

因此，如果你将鼠标悬停在框上， t有任何效果。相反，设置转换到常见父容器的：hover ，在这种情况下， .box div：

So, if you hover the box, but not the circle, it won't have any effect. Instead, set the transition to the :hover of the common parent container, in this case, the .box div:

更新小提琴

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

....

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

EDIT

与 .icon：hover {相同，如果需要，可以 .box：hover .icon { / code>： http://jsfiddle.net/Lsnbpt8r/3/

The same with the .icon:hover { if you want, it can be .box:hover .icon{: http://jsfiddle.net/Lsnbpt8r/3/

这篇关于css过渡的多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！