堆栈内存溢出
  简体   繁体   English

导航栏下划线悬停动画

[英]Navbar underline hover animation

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

问题描述

i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.我正在尝试制作一个悬停动画，当鼠标悬停在它上面时会出现一条下划线。

what can i add to achieve that?我可以添加什么来实现这一目标？ i tried the pre made ones but it didn't work.我试过预制的，但没有用。 it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).它显示一行出现但不在导航栏文本下，而是在网站本身（在屏幕底部）下。 

 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

Try this code, I marked my edits on your css code.试试这个代码，我在你的 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

Add text-decoration:underline to your li:hover code like this...将text-decoration:underline添加到您的li:hover代码中，如下所示...

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

解决方案3
 0 已采纳  2020-09-26 11:48:28

You should apply the transition to the element, not its hover state.您应该将transition应用于元素，而不是其悬停状态。 With transition you are telling telling the element how to behave if anything changes.通过transition您可以告诉元素在发生任何变化时如何表现。 In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.在这种情况下，所有样式（易受过渡影响）的时间为 0.3 秒，具有缓入缓出速度曲线。

Then use the :hover selector to indicate what changes need to be made.然后使用:hover选择器指示需要进行哪些更改。 So in this case change the background color and add an underline to the text.因此，在这种情况下，请更改背景颜色并为文本添加下划线。

Also avoid using inline styles when possible.尽可能避免使用内联样式。 

 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>

If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.如果您打算将下划线应用于框的底部而不是文本，您可以使用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 Code Invalid you added <a> section in <ul> without <li> tag 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>

changes to更改为

<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>

Edit in CSS:在 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

Working Demo工作演示

 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 Hover Underline Animation CSS 菜单悬停下划线动画 - CSS Menu Hover Underline Animation 链接上的下划线和箭头 Animation Hover - Underline and Arrow on Link Animation Hover Css 下划线 animation 当 hover 和活动时 - Css underline animation when hover AND when active div内的CSS文本悬停下划线动画 - CSS text hover underline animation inside of div bootstrap4 导航栏下划线 - bootstrap4 navbar underline 悬停时删除下划线链接 - Remove underline link on hover 悬停时显示下划线的文本 - Text that shows an underline on hover 在悬停导航项下划线 - Underline on Hover Navigation Item 悬停下划线的边距问题 - Margin Issue with hover underline
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM