gpt4 book ai didi

javascript - 菜单的 Jquery mouseover mouseout 问题

转载 作者:行者123 更新时间:2023-11-30 10:31:30 25 4
gpt4 key购买 nike

我正在尝试在悬停此网站的标题时显示一个菜单。

这是我的 jQuery:

$("#header").mouseover(function() {
$('#header_links').stop(true, true).show(400);
});

$("#header").mouseout(function() {
$('#header_links').stop(true, true).hide(400);
});

这是我的 HTML:

<body>
<div id="header">
<div id="header_title">leks kamihira&nbsp;</div>
<div id="header_links">
<a href="work.php">works</a>
<a href="bio.php">bio</a>
<a href="blog">blog</a>
<a href="links.php">links</a>
<?php
if (isset($_SESSION['logged_in'])) { ?>
<a href="admin">admin</a>
<a href="admin/logout.php">logout</a>
<?php } ?>
</div>
</div>

问题是,每当 header_title div 或 header_links div 也悬停在上方时,header_links 就会消失。

有没有办法确保只要 div 包含在主标题 div 中,mouseover 和 mouseout 就可以正常运行?

最佳答案

你可以使用 mouseenter() mouseleave() :

$("#header").mouseenter(function() {
$('#header_links').stop(true, true).show(400);
});

$("#header").mouseleave(function() {
$('#header_links').stop(true, true).hide(400);
});

jsFiddle here.

Here's a nice simple demo显示 mouseover()mouseenter() 之间的区别。


你也可以使用它,正如 @PSL 提到的:

$("#header").on('mouseenter mouseleave',function() { 
$('#header_links').stop(true, true).toggle(400);
});

关于javascript - 菜单的 Jquery mouseover mouseout 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16701452/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com