Question

亲爱的Stackoverflow读者，

仅使用CSS3，如何在转换完成后显示div。

这是我正在使用的HTML代码片段

<div class="biography">
      <p>Title</p>
      <p id="moreBio">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>

这是我正在使用的CSS3的片段

.biography {
    width: 100px;
    height: 40px;
    float: left;
    margin: 5px;
    background: #3399FF;
    color: #ffffff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    right: 5%;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    opacity: 0.4;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.biography:hover {
    width: 200px;
    height: 600px;
    margin: 10px 10px 0px -100px;
    opacity: 1;
    background: #7C7C7C;
}
#moreBio {
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
}
#moreBio:hover {
    opacity: 1;
}

我希望#moreBio在转换完成后显示，我该怎么做呢？

提前非常感谢你。

Answer 1

将transition-delay添加到#moreBio等于.biography的过渡时间，并在.biography悬停时触发外观。

#moreBio {
    opacity: 0;
    transition: opacity 0.5s 0.5s ease;
    -webkit-transition: opacity 0.5s 0.5s ease;
    -o-transition: opacity 0.5s 0.5s ease;
    -moz-transition: opacity 0.5s 0.5s ease;
}
.biography:hover  #moreBio {
    opacity: 1;
}

Answer 2

而不是执行#moreBio:hover，您可以执行.biography:hover #moreBio，然后为#moreBio转换添加延迟，如此

// ... other code just like it's

#moreBio {
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
     -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.biography:hover #moreBio {
    opacity: 1;
}

这是working sample。

转换完成后，显示div

2 个答案: