Question

我在一个我有三个div的网站上工作，当我将鼠标悬停在任何一个div上时，我希望div延长，然后然后我希望要改变的文字。

目前，我已经得到它以便div扩展并且文本同时更改。我无法弄清楚如何在div完成动画后进行文本更改。我已经尝试将这段代码transition: .2s .2s;添加到每个类和id中，但似乎没有任何效果。有什么想法吗？

这是指向页面的链接：http://colorsplash.co.uk/test.html

以下是代码：
HTML：

<div class="boxes">
    <div class="box1">
        <div id="create-box" class="about-box"><span class="box-span">Create</span></div>
    </div>
    <div class="box2">
        <div id="produce-box" class="about-box"><span class="box-span">Produce</span></div>
    </div>
    <div class="box3">
        <div id="collab-box" class="about-box"><span class="box-span">Collaborate</span></div>
    </div>
</div>

CSS：

.boxes{
   padding-top: 50px;
   text-align: center;
   font-family: Arial;
}
.about-box{
   height: 20px;
   display: inline-block;
   width: 150px;
   padding: 20px;
   color: white;
   background-color: black;
   margin: 10px 10px 0 10px;
   -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}
.about-box:hover{
   width: 300px;
}
.box1,.box2,.box3{
   display: inline;
}
.box1:hover #create-box span{
   display: none;
}
.box1:hover #create-box:after{
   content: 'Create visual designs & interactive media';
}
.box2:hover #produce-box span{
   display: none;
}
.box2:hover #produce-box:after{
   content: 'Produce / Manufacture clothing pieces';
}
.box3:hover #collab-box span{
   display: none;
}
.box3:hover #collab-box:after{
   content: 'Collaborate on diverse creative projects';
}

Answer 1

如果你想看看如何在transition的帮助下完成这种效果，那么这是演示。我使用过transition-delay。为了延迟transition并使用visibility来控制pseudo-content显示。只需浏览片段，您就会理解这个概念。

.boxes {
      padding-top: 50px;
      text-align: center;
      font-family: Arial;
    }
    
    .about-box {
      height: 20px;
      display: inline-block;
      width: 150px;
      padding: 20px;
      color: white;
      background-color: black;
      margin: 10px 10px 0 10px;
      -o-transition: .2s;
      -ms-transition: .2s;
      -moz-transition: .2s;
      -webkit-transition: .2s;
      transition: all ease .2s;
    }
    .about-box:after {
      white-space: nowrap;
    }
    .about-box:hover {
      width: 300px;
      transition: .5s ease-out; 
      transition-delay: 0s;
    }
    
    .box1,
    .box2,
    .box3 {
      display: inline;
    }
    
    .box1:hover #create-box span {
      display: none;
    }
    .box1 #create-box:after, .box2 #produce-box:after, .box3 #collab-box:after {
      content: '';
      visibility: hidden;
      transition-delay: .3s;
    } 
    .box1:hover #create-box:after {
      content: 'Create visual designs & interactive media';
      visibility: visible;
    }
    
    .box2:hover #produce-box span {
      display: none;
    }
    
    .box2:hover #produce-box:after {
      content: 'Produce / Manufacture clothing pieces';
      visibility: visible;
    }
    
    .box3:hover #collab-box span {
      display: none;
    }
    
    .box3:hover #collab-box:after {
      content: 'Collaborate on diverse creative projects';
      visibility: visible;
    }

<div class="boxes">
  <div class="box1">
    <div id="create-box" class="about-box"><span class="box-span">Create</span></div>
  </div>
  <div class="box2">
    <div id="produce-box" class="about-box"><span class="box-span">Produce</span></div>
  </div>
  <div class="box3">
    <div id="collab-box" class="about-box"><span class="box-span">Collaborate</span></div>
  </div>
</div>

Answer 2

http://codepen.io/anon/pen/vLWewb

.boxes{
   padding-top: 50px;
   text-align: center;
   font-family: Arial;
}
.about-box{
   height: 20px;
   display: inline-block;
   width: 150px;
   padding: 20px;
   color: white;
   background-color: black;
   margin: 10px 10px 0 10px;
   -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}
.about-box:hover{
   width: 300px;
}
.box1,.box2,.box3{
   display: inline;
}

.about-box:after{
  white-space:nowrap;
   content:"";
  -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}

.box1:hover #create-box span{
   display: none;
}
.box1:hover #create-box:after{
   content: 'Create visual designs & interactive media';
}
.box2:hover #produce-box span{
   display: none;
}
.box2:hover #produce-box:after{
   content: 'Produce / Manufacture clothing pieces';
}
.box3:hover #collab-box span{
   display: none;
}
.box3:hover #collab-box:after{
   content: 'Collaborate on diverse creative projects';
}

控制多个CSS转换的定时/延迟

2 个答案: