示例代码是这个 http://www.thibaud.be/#/style04/
自己写了一个 但是连续hover时 里面的字会上升 怎样解决？代码在下面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> a{ text-decoration: none; color: #333333; } .bar{ list-style: none; width:200px; height:50px; line-height: 50px; font: "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b8b\4f53; transition:all 1s ease; border-bottom-left-radius: 5%; border-bottom-right-radius: 5%; } .bar:hover{ height:80px; } .bar:hover a{ transform: translate(80px,0); } #bar1{ background: rgba(255, 106 ,106,0.5); } #bar2{ background: rgba(106, 90 ,205,0.5); } #bar3{ background: rgba(127, 255, 0,0.5); } #bar4{ background: rgba(99 ,184, 255,0.5); } #bar5{ background: rgba(144 ,238 ,144,0.5); } </style></head><body><div id="header"> <div id="nav"> <div id="logo"></div> <ul> <li class="bar" id="bar1"> <a href="###">Home</a></li> <li class="bar" id="bar2"> <a href="###">Product</a></li> <li class="bar" id="bar3"> <a href="###">Desiger</a></li> <li class="bar" id="bar4"> <a href="###">Blog</a></li> <li class="bar" id="bar5"> <a href="###">About</a></li> </ul> </div></div></body></html>
.bar:hover{ height:80px; line-height: 80px; }一楼正解！！
保证 a 和a:hover 的高度一样，大小一样，就不跑了，也同意1楼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
