我需要的是为我的下拉菜单提供平滑的悬停效果。为什么jQuery悬停效果不起作用？
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);不适合我。当鼠标悬停时，效果不起作用。
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
// breakpoint and up
$(window).resize(function() {
if ($(window).width() >= 980) {
// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function() {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
});
// hide the menu when the mouse leaves the dropdown
$(".navbar .dropdown-menu").mouseleave(function() {
$(this).removeClass("show");
});
// do something here
}
});
// document ready
//wow.js init
new WOW().init();
});
这是我的HTML标记。我正在使用bootstrap 4最新版本。我能做什么用jQuery的平稳悬停效果或JavaScript
class="header_area">
2 回答
.hover()有两个处理器。鼠标IN和鼠标OUT。
如果您希望定义在鼠标移出时发生的事情，您必须定义处理程序。
element.hover(mouseenter, mouseleave);
Documentation
所以我建议：
$(".navbar .dropdown-toggle").hover(
// Mouseenter event handler
function() {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
},
// Mouseleave event handler
function(){
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
}
);
如果你想使用.hover()，这是可以做到像这样：
$(".navbar .navbar-toggler").hover(function(e) {
$(".navbar .navbar-collapse").addClass("show").fadeIn(500);
}, function(e) {
$(".navbar .navbar-collapse").removeClass("show").fadeOut(500);
});
这有缺点，一旦当您移动鼠标点击或选择其中一个菜单项时，它将恢复该类并隐藏起来。
我会建议留在.click()所有情况下。
$(".navbar .navbar-toggler").click(function() {
$(".navbar .navbar-collapse").toggleClass("collapse show");
});
工作实例：https://jsfiddle.net/4gas2aok/4/
如果您想保留褪色，使用.fadeToggle()：这将移动和桌面浏览器上工作
$(".navbar .navbar-toggler").click(function() {
$dropdown.fadeToggle(500).toggleClass("collapse show");
});
引导CSS解决了很多的宽度问题已经存在，所以你不需要检查窗口宽度，只需让bootstrap自行处理。
完整的例子：https://jsfiddle.net/4gas2aok/7/
这家伙很懒，还没有设置简介
