[英]Bootstrap 4 Dropdown menu hover with Jquery
I have a Bootstrap Dropdown menu with an animation made by Jquery.我有一个带有 Jquery 动画的 Bootstrap 下拉菜单。 The animation is exactly what I want but when I move my mouse cursor from Dropdown's name (
.dropdown
) to Dropdown's item, it's going crazy.动画正是我想要的,但是当我将鼠标光标从 Dropdown 的名称 (
.dropdown
) 移动到 Dropdown 的项目时,它会发疯。
$('.dropdown').hover(function() {
$(this).find(".dropdown-menu").first().stop(true, true).show("slide", {
direction: "up"
}, 250);
}, function() {
$(this).find(".dropdown-menu").first().stop(true, true).hide("slide", {
direction: "up"
}, 250);
});
Here is my codepen: https://codepen.io/nht910/pen/yLNqQwX这是我的代码笔: https ://codepen.io/nht910/pen/yLNqQwX
How can I fix this problem?我该如何解决这个问题?
Thank you so much.非常感谢。
Just editing your CSS
code fixed the problem.只需编辑您的
CSS
代码即可解决问题。 It's because of the vertical distance between .dropdown>div
and .dropdown>a
element这是因为
.dropdown>div
和.dropdown>a
元素之间的垂直距离
use it:用它:
.navbar {padding:0 !important;}
.dropdown {
position: relative;
z-index: 2;
}
.dropdown> a{
padding: 15px;
}
@media (min-width: 768px) {
.dropdown>div {
position: absolute;
top: 80%;
clip: rect(0.5rem, 9999px, 9999px, -9999px);
z-index: 1;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.