如何在導航欄上拉伸單個項目？
[英]How can I make individual items on the nav bar stretch?
問題描述
在我的導航欄中，我只希望將鼠標懸停在元素上以伸展並更改顏色，但是似乎整個導航欄都在延伸。 我嘗試更改必須懸停在哪個位置才能觸發動畫，但是似乎沒有任何效果。 您能識別並糾正我的錯誤嗎？
@keyframes mouse { 0% { background-color: #35B1C2; height: 40px } 100% { background-color: #2F9EBD; height: 60px } } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #35B1C2; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li:hover { animation-fill-mode: forwards; animation-duration: 0.5s; animation-name: mouse; } li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }
<ul> <li><a href="index.html">Home</a></li> <li><a href="aboutme.html">About Me</a></li> <li><a href="projects.html">Projects</a></li> </ul>
4 個解決方案
解決方案1
0
嘗試這個：
ul, li a:hover {
font-size: 30px;
color: red;
}
解決方案2
0 已采納 2017-04-07 03:03:09
您可以刪除overflow:hidden並添加
overflow:visible;
height:45px; /* The height of your navbar */
對你的ul元素。
解決方案3
0 2017-04-07 03:06:30
您的代碼中實際上沒有錯誤。 情況是ul框包含li框。 因此，當您將鼠標懸停在li框上並且li框的高度從40px增大到60px時，包含該框的ul框也會伸出，因為它需要包含li框。
因此，您只需要解決該問題。 我建議根本不使用ul框，但這只是我認為更有效的方法，因為您意識到實際上並不需要它（您仍需要將導航欄包含在框內，也許div或header ）。
解決方案4
0 2017-04-07 03:09:55
您尚未設置導航欄高度。 因此，當懸停時li高度發生變化時，導航欄將調整其高度以適合內容。 與其進行動畫處理，不如通過簡單的過渡來實現。 將最小高度添加到導航欄，並將過渡屬性應用於ul標簽。 同時應用溢出：懸停時可見
請參見下面的代碼段
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #35B1C2; min-height: 50px; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li :hover { background-color: #2F9EBD; height: 60px; transition: all 1s; } ul:hover { overflow: visible; } li { border-right: 1px solid #bbb; transition: all 1s; } li:last-child { border-right: none; } </style> </head> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="aboutme.html">About Me</a></li> <li><a href="projects.html">Projects</a></li> </ul> </body> </html>
如何使導航欄項目之間的空間彼此相同
[英]How can I make the space between the items of the nav bar be the same between each other
如何在CSS中垂直對齊兩個導航欄項目，然后是圖像，然后又是兩個對齊的導航欄項目？
[英]How do I vertically align two nav bar items, then an image and then again two nav bar items in CSS?
如何使頁腳停止與移動導航欄重疊？ 在移動視圖中，導航欄位於頁腳下方。 任何解決方案？
[英]How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.