<style> .wrap{ transition: all 1s ease; height: 100px; overflow: hidden; text-align: center; } .wrap .return{ margin-top: -22px; transition: all 1s ease; } .wrap .name{ transition: all 1s ease; } .title:hover .return{ margin-top: 0; } .title:hover .name{ font-size: 23px; color: #465b90; } </style>
<div class="title"> <div class="wrap"> <p class="return">返回</p> <p class="name">UES的工作区</p> <p class="sche">面试安排</p> </div> </div>
思路纪要:三个容器,最上面的margin-top出去,鼠标悬停上面的下来,中间的文字放大,整个容器溢出隐藏。