堆棧內存溢出
  簡體   English   中英

導航欄下划線懸停動畫

[英]Navbar underline hover animation

 原文  2020-09-26 11:42:12  9   4    html/ css

問題描述

我正在嘗試制作一個懸停動畫，當鼠標懸停在它上面時會出現一條下划線。

我可以添加什么來實現這一目標？ 我試過預制的，但沒有用。 它顯示一行出現但不在導航欄文本下，而是在網站本身（在屏幕底部）下。 

 html, body { margin: 0; padding: 0; background-color: grey; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; height: 100px; } li { padding: 40px 16px; display: table-cell; text-align: center; } li a { display: block; color: white; text-align: center; text-decoration: none; font-size: 17px; letter-spacing: 2.5px; } li a:hover { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .hover-nav { background-color: tomato; } #logo { margin-left: 30px; margin-top: 25px; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mob-Mob</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a> <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li> <li style="float: right;"><a href="">ჩვენს შესახებ</a></li> <li style="float: right;"><a href="">ქეისები</a></li> </ul> </nav> </body> </html>

4 個解決方案

解決方案1
 1  2020-11-17 15:04:24

試試這個代碼，我在你的 css 代碼上標記了我的編輯。 

 html, body { margin: 0; padding: 0; background-color: grey; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; height: 100px; } li { padding: 40px 16px; display: table-cell; text-align: center; } li a { display: block; color: white; text-align: center; text-decoration: none; font-size: 17px; letter-spacing: 2.5px; } li a:hover { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } /*Edit starts here*/ li { position:relative; } li::after { content: ''; display: block; width: 0; position:absolute; left:50%; height: 2px; background: #0077ff; transition: cubic-bezier(.77,0,.18,1) 1s; } li:hover::after { width: 80%; left: 10%; } li { transition: cubic-bezier(.77,0,.18,1) 1s; } li:hover { background-color: tomato; } /*Edit ends here*/ #logo { margin-left: 30px; margin-top: 25px; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mob-Mob</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a> <li style="float: right;"><a href="">კონტაქტი</a></li> <li style="float: right;"><a href="">ჩვენს შესახებ</a></li> <li style="float: right;"><a href="">ქეისები</a></li> </ul> </nav> </body> </html>

解決方案2
 0  2020-09-26 11:48:04

將text-decoration:underline添加到您的li:hover代碼中，如下所示...

li a:hover {
  text-decoration:underline;
}

解決方案3
 0 已采納  2020-09-26 11:48:28

您應該將transition應用於元素，而不是其懸停狀態。 通過transition您可以告訴元素在發生任何變化時如何表現。 在這種情況下，所有樣式（易受過渡影響）的時間為 0.3 秒，具有緩入緩出速度曲線。

然后使用:hover選擇器指示需要進行哪些更改。 因此，在這種情況下，請更改背景顏色並為文本添加下划線。

盡可能避免使用內聯樣式。 

 html, body { margin: 0; padding: 0; background-color: grey; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; height: 100px; } li { text-align: center; float: right; } li a { display: block; color: white; padding: 40px 16px; text-decoration: none; font-size: 17px; letter-spacing: 2.5px; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } li a:hover { background-color: tomato; text-decoration: underline; }
 <nav> <ul> <li><a href="">კონტაქტი</a></li> <li><a href="">ჩვენს შესახებ</a></li> <li><a href="">ქეისები</a></li> </ul> </nav>

如果您打算將下划線應用於框的底部而不是文本，您可以使用border-bottom並確保使用box-sizing: border box以便在添加邊框時您的元素將保持相同的大小。 

 html, body { margin: 0; padding: 0; background-color: grey; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; height: 100px; } li { text-align: center; float: right; } li a { display: block; color: white; padding: 40px 16px; text-decoration: none; font-size: 17px; letter-spacing: 2.5px; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; box-sizing: border-box; height: 100px; } li a:hover { background-color: tomato; border-bottom: 1px solid white; }
 <nav> <ul> <li><a href="">კონტაქტი</a></li> <li><a href="">ჩვენს შესახებ</a></li> <li><a href="">ქეისები</a></li> </ul> </nav>

解決方案4
 0  2020-09-26 14:45:41

HTML 代碼無效您在<ul>添加了<a>部分而沒有<li>標記

<ul>
  <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
  <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
  <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
  <li style="float: right;"><a href="">ქეისები</a></li>
</ul>

更改為

<ul>
  <li><a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a></li>
  <li style="float: right;" class="hover-nav"><a href="">კონტაქტი</a></li>
  <li style="float: right;"><a href="">ჩვენს შესახებ</a></li>
  <li style="float: right;"><a href="">ქეისები</a></li>
</ul>

在 CSS 中編輯：

ul {      
  width:100%;
  display: flex;
  align-items: center;
}
li {
  width:100%; // remove padding and add to `li a`.
}
li a{
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
li a:hover { // instead of .hover-nav
  background-color: tomato;
  border-bottom:4px solid #fff;
}
// remove #logo margin

工作演示

 html, body { margin: 0; padding: 0; background-color: grey; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; width:100%; background-color: #333; height: 100px; display: flex; align-items: center; } li { width:100%; } li a { display: block; color: white; text-align: center; text-decoration: none; font-size: 17px; letter-spacing: 1.5px; border-bottom:4px solid transparent; height: 100px !important; display: flex; align-items: center; justify-content: center; } li a:hover { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } li a:hover { background-color: tomato; border-bottom:4px solid #fff; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mob-Mob</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <li><a href=""><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></a></li> <li class="hover-nav"><a href="">კონტაქტი</a></li> <li><a href="">ჩვენს შესახებ</a></li> <li><a href="">ქეისები</a></li> </ul> </nav> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS Hover 下划線 Animation CSS 菜單懸停下划線動畫 鏈接上的下划線和箭頭 Animation Hover Css 下划線 animation 當 hover 和活動時 div內的CSS文本懸停下划線動畫 bootstrap4 導航欄下划線 懸停時刪除下划線鏈接 懸停時顯示下划線的文本 在懸停導航項下划線 懸停下划線的邊距問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM