【发布时间】：2011-11-01 06:53:22
【问题描述】：
我正在尝试执行此已回答问题Jquery show div on hover then when user hovers out of div hide it help? 中的说明，然后添加更多功能。这是我将问答代码组合成的：
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
$(".plans").hover(
$('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
switch(event.type) {
case 'mouseenter':
// when user enters the div
$(".mainnavbottom").show("fast");
break;
case 'mouseleave':
// leaves
$(".mainnavbottom").hide("slow");
break;
}
});
});
我无法让它工作。我确定这是因为我是 javascript n00b，所以任何建议都将不胜感激。
我也尝试过jQuery hoverIntent Plugin show / hide div on parent hover, but keep showing when hovered，但还是不开心。
也许我在头部错误地添加了答案代码？以我引用的两个例子为例，任何人都可以向我展示头部的完整 javascript 代码吗？我觉得我在这里犯了一个简单的错误。
假设我可以让它工作，我想向它添加另一个维度。一旦上述代码中的 div “出现”，它包含更多链接，然后用户可以将每个“按钮”悬停并查看更多信息（文本和可能的图像）。如果可能的话，我希望该文本和图像成为链接的可点击部分，但如果没有它也可能存在。
可能是，一旦我让上面的代码工作，我可以将相同的概念应用到辅助悬停，但我不确定，因为上面的代码没有成功。谁能发现我的（可能很明显）错误？我提到的附加功能听起来会不会是个问题。
在此先感谢您提供任何帮助。
编辑 - 有人要求我发布所有代码
<html>
<head>
<script src="jquery.js"></script>
<script language="Javascript">
$(document).ready(function(){
//when user hovers over plans the mainnavbottom is shown
$("#plans").hover(
$('#mainnavbottom').bind('mouseenter mouseleave', function(event) {
switch(event.type) {
case 'mouseenter':
// when user enters the div
$("#mainnavbottom").show("fast");
break;
case 'mouseleave':
// leaves
$("#mainnavbottom").hide("slow");
break;
}
});
});
</script>
</head>
<body>
<div id="plans"> // some stuff </div>
<div id="mainnavbottom">
// some other stuff that I want to
// keep showing if users hover over it
</div>
</body>
</html>
【问题讨论】：
-
好的，完成。根据下面的 cmets 从 class 更改为 id。
-
你也可以发布 CSS 吗？或者有没有？
-
还没有 CSS，我更关心的是在设计之前能否获得我想要的功能。
标签： javascript jquery navigation