css下拉效果。怎样hover时让那个字不上升啊_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:41:071162瀏覽
示例代码是这个 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楼
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn