鼠标hover和鼠标输出function在下拉菜单中
HTML
lorem
header text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus possimus ab adipisci sit tenetur assumenda cupiditate iure modi minus repellat corrupti reiciendis sapiente sunt porro autem temporibus impedit quaerat perspiciatis?
Unde consectetur vitae consequuntur error rerum laborum atque sequi explicabo aut necessitatibus omnis doloremque beatae voluptatum soluta fugiat nulla reiciendis deserunt. Dolore molestiae sint atque labore at quam ducimus itaque?
Architecto facere eius magnam sed quae odit doloribus dicta. Aperiam consectetur magnam reprehenderit quod sint consequuntur quisquam ab delectus tempore in laudantium quis voluptate iure voluptatem minus placeat nulla officiis.
22 12 5
我需要它，以便：
- 当用户hover在
.open-hidden-nav a– 出现下拉菜单，如果hover.hidden-nav它将保持可见状态 - 当用户更改目标（其他任何内容而不是
.open-hidden-nav a和.hidden-nav）时 – 下拉菜单保持1并消失。
我写了这个jQuery：
$(window).load(function(){ $(".open-hidden-nav a").on("mouseover", function () { $(".hidden-nav").addClass('open'); }); $(".hidden-nav").on("mouseover", function () { $(".hidden-nav").addClass('open'); $(".open-hidden-nav").addClass('active'); }); $(".open-hidden-nav a").on("mouseout", function () { setTimeout( function(){ $('.hidden-nav').removeClass('open'); }, 1000); }); $(".hidden-nav").on("mouseout", function () { setTimeout( function(){ $(".hidden-nav").removeClass('open'); $(".open-hidden-nav").removeClass('active'); }, 1000); }); });
但它无法正常工作，并且css转换正在鼠标hover工作，但不在mouseout上工作..
另一个问题 – 是否可以通过浏览器或iPad等移动设备使用mouseover和mouseoutfunction？
这是JsFiddle Link ，我希望你能帮助我）
好的，调整了一下你的代码，我相信它涵盖了所需的function。
小提琴 ： 水平下拉菜单
码：
$（window）.load（function（）{var closeTimeout;
$(".open-hidden-nav a").hover( //Hoverin; function () { clearTimeout(closeTimeout); $(".hidden-nav").addClass('open'); }, //Hoverout; function () { closeTimeout = setTimeout(function () { $(".hidden-nav").removeClass('open'); $(".open-hidden-nav").removeClass('active'); }, 1000); }); $(".hidden-nav").hover( //Hoverin; function () { clearTimeout(closeTimeout); $(".hidden-nav").addClass('open'); $(".open-hidden-nav").addClass('active'); }, //Hoverout; function () { closeTimeout = setTimeout(function () { $(".hidden-nav").removeClass('open'); $(".open-hidden-nav").removeClass('active'); }, 1000); });
}）;
说明：
基本上我用hover语法改变了mouseover和mouseout事件，它接受两个函数作为参数。 一个用于hoverin ，一个用于hoverout ，这解决了你遇到的mouseout不一致的问题。
第二个更改是将超时作为全局可访问变量公开，因此如果您碰巧将鼠标从隐藏菜单移回打开它的按钮，则可以将其关闭。 因为，毕竟，我们不希望它隐藏起来，因为你的鼠标首先打开了它。
在所有其他情况下，它将在一秒钟内关闭。