[英]“Drop” <li> hover in bootstrap menu
so the problem is, i have to do an animation for hover on bootstrap nav that looks like this: 所以问题是,我必须在引导导航上做一个悬停动画,如下所示:
And animation i need is the color-line going to the bottom of li with the rest of "new" li object that looks almost the same but has it different background color, so something like this: 我需要的动画是色线到达li的底部,其余的“ new” li对象看起来几乎相同,但是背景颜色不同,所以是这样的:
I realised that it's (probably) impossible to change the position of the border-top, so do i need some other object above every li, that will 'cover' it on hover? 我意识到无法(可能)更改边框顶部的位置,因此我是否需要在每个li上方放置其他对象,以便在悬停时“覆盖”它? I really have no idea how to create that. 我真的不知道如何创建它。 Thank you so much for any help. 非常感谢您的帮助。
You can create overlay with :after
pseudo element and change it's height to 0
on hover. 您可以使用:after
伪元素创建叠加层,并在悬停时将其高度更改为0
。 Also you can add top: 100%
and that will create slide to bottom transition. 您还可以添加top: 100%
,这将创建幻灯片到底部的过渡。
* { box-sizing: border-box; } ul { display: flex; max-width: 400px; padding: 0; list-style-type: none; margin: 0 auto; } li { flex: 1; position: relative; padding: 20px 0; text-align: center; border-right: 1px solid #D8D9DB; } li:after { position: absolute; transition: all 0.3s ease-in; content: ''; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: #E3E3E5; z-index: -1; border-top: 5px solid black; } li:hover:after { height: 0; bottom: 0; top: 100%; }
<ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul>
Or you can remove height: 0
and bottom: 0
and just use top: 100%
and you will get something like this 或者,您可以删除height: 0
和bottom: 0
并仅使用top: 100%
,您将获得类似以下的内容
* { box-sizing: border-box; } ul { display: flex; max-width: 400px; padding: 0; list-style-type: none; margin: 0 auto; } li { flex: 1; position: relative; padding: 20px 0; text-align: center; border-right: 1px solid #D8D9DB; } li:after { position: absolute; transition: all 0.3s ease-in; content: ''; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: #E3E3E5; z-index: -1; border-top: 5px solid black; } li:hover:after { top: 100%; }
<ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.