如何在导航栏上拉伸单个项目？
[英]How can I make individual items on the nav bar stretch?
问题描述
In my navagation bar, I want only hovered on elements to stretch out and change color, but it seems the whole navagation bar stretches. 
在我的导航栏中，我只希望将鼠标悬停在元素上以伸展并更改颜色，但是似乎整个导航栏都在延伸。 I've tried changing what must be hovered on to trigger the animation, but nothing seems to be working. 我尝试更改必须悬停在哪个位置才能触发动画，但是似乎没有任何效果。 Can you identify and correct my error? 您能识别并纠正我的错误吗？
@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
Try this: 尝试这个：
ul, li a:hover {
font-size: 30px;
color: red;
}
解决方案2
0 已采纳 2017-04-07 03:03:09
You can remove the overflow:hidden and add 您可以删除overflow:hidden并添加
overflow:visible;
height:45px; /* The height of your navbar */
to your ul element. 对你的ul元素。
解决方案3
0 2017-04-07 03:06:30
There is actually no error in your code. 您的代码中实际上没有错误。 What happens is that the ul box contains the li boxes. 情况是ul框包含li框。 So, when you hover on a li box and the li box's height increases from 40px to 60px, the ul box that is containing that box also stretches out because it needs to contain the li box. 因此，当您将鼠标悬停在li框上并且li框的高度从40px增大到60px时，包含该框的ul框也会伸出，因为它需要包含li框。
So, you just need to work around that issue. 因此，您只需要解决该问题。 I'd suggest not using the ul box at all, but that's just something I think is more efficient because you realize you don't actually really need it (you'd still need to contain the navigation bar inside of a box, maybe a div or header ). 我建议根本不使用ul框，但这只是我认为更有效的方法，因为您意识到实际上并不需要它（您仍需要将导航栏包含在框内，也许div或header ）。
解决方案4
0 2017-04-07 03:09:55
You have not set a nav bar heigh. 您尚未设置导航栏高度。 So when the li height change on hover, the navbar will adjust its height to fit the content. 因此，当悬停时li高度发生变化时，导航栏将调整其高度以适合内容。 Instead of going with animation, I would do this with a simple transition. 与其进行动画处理，不如通过简单的过渡来实现。 Add a min-height to the navbar and apply a transition property to the ul tag. 将最小高度添加到导航栏，并将过渡属性应用于ul标签。 Also apply an overflow:visible on hover 同时应用溢出：悬停时可见
See snippet below 请参见下面的代码段
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.