Jquery：当hover在菜单项上时，显示文本
我是JQuery的新手，但希望在我正在构建的网站中使用它。
当用户使用li class hovertriggerssubhead将菜单鼠标hover在菜单中时，我想在其下方显示一些文本，位于div（嵌套在li中），ID为NavSubhead 。 我已经看了几个这样的例子，即在JQuery文档的FAQ中的cookbook和JQuery站点本身的代码。
这是我的HTML代码：
我尝试了两种在我的JQuery代码中完成此操作的方法; 他们在下面：
$(document).ready(function() { //first method $(".NavSubhead").hide(); $('#Navigation li').hover( function(){$(this).find('div.NavSubhead:hidden').fadeIn(500);}, function(){$(this).find('div.NavSubhead:visible').fadeOut(500);} ); //second method $("#Navigation li div").hide(); $("#Navigation li.hovertriggerssubhead").hover( function () { $(this).children("div.NavSubhead").show(); },function(){ $(this).children("div.NavSubhead").hide(); });//hover });// document ready
任何帮助，将不胜感激。 谢谢！
更新 ：我尝试了很多答案，即使是一个有工作演示的答案，但它仍然不起作用，这很奇怪。 它是否可以通过任何机会与导航html的约束相关，因为包含表格？ 桌子有一个固定的宽度。 除此之外，我不知道是什么问题，并且正确引用了JQuery。 提前致谢！
更新＃2 ：由于我的HTML有一些奇怪的限制，因此可能无法正常工作，我将在此处发布。 正如您在下面看到的，我也在使用这个幻灯片框架。
MZ Photography /* $(function() { $("div.NavSubhead").hide(); $('#Navigation li a').hover( function(){$(this).next().stop(false, true).slideDown().fadeIn(500);}, function(){$(this).next().stop(false, true).slideUp().fadeOut(500);} ); }); */ $(function() { /* hacky nav highlighting */ var loc = window.location.href; //strip the existing current state $('#Navigation .current').removeClass('current'); //add class to current section... //Home if(loc.indexOf('MZPhotography.html') > -1){ $('#Navigation #home').addClass('current'); } //Gallery else if(loc.indexOf('gallery') > -1){ $('#Navigation #gallery').addClass('current'); } //Contact else if(loc.indexOf('https://stackoverflow.com/questions/1276889/jquery-when-hover-on-menu-item-display-text/contact.html') > -1){ $('#Navigation #contact').addClass('current'); } }); $(document).ready(function() { $("div.NavSubhead").hide(); $('#Navigation li a').hover( function(){$(this).next().stop(false, true).slideDown().fadeIn(500);}, function(){$(this).next().stop(false, true).slideUp().fadeOut(500);} ); }); // 
Welcome to MZ's personal photography site. Here, you will find galleries of some of his photos, by pressing the Galleries link at the top right hand side of the page. Enjoy!
<!-- --> <!--© Copyright 2009 by MZ.
All Rights Reserved.
<!-- -->
hi
© Copyright 2009 by MZ. All Rights Reserved.
以下是我的css，在site.css中 。
/* CSS for MZ Photography site. Coypright 2009 by MZ, All Rights Reserved. */ p.copy { color:#ffffff; font-face:Helvetica,Calibri,Arial; font-size:12; font-style:italic;} .leftfloat { float: left; } .rightfloat { float: right; } body { font: 12px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif!important; color: #ffffff; background: #000000; } #about { color: #3399FF; } /* #666 */ h1 { font: Helvetica, "Comic Sans MS", "Arial Rounded MT Bold", Tahoma, "Times New Roman"; font-size: 32pt; color: #339; } h2 { font: Helvetica, Arial; font-size: 18pt; color: #666; } a.hover { background-color:#666; color:#ffffff; } #tdAbout { width:25 } #nav { float:right } #linklist { font-family: Calibri, Helvetica, Comic Sans MS, Arial, sans-serif; list-style-type:circle; white-space:nowrap; } #linklist li { display:inline } /* Warnings/Alerts */ .warning, .alert, .yellowbox { padding: 6px 9px; background: #fffbbc; border: 1px solid #E6DB55; } .yellowboxtransparent, .warningtransparent, .alerttransparent { padding:6px 9px; border: 1px solid #E6DB55; } /* Errors */ .error, .redbox { padding: 6px 9px; background: #ffebe8; border: 1px solid #C00; } .redboxtransparent, .errortransparent{ padding: 6px 9px; border: 1px solid #C00; } /* Downloads */ .download, .greenbox { padding: 6px 9px; background: #e7f7d3; border: 1px solid #6c3; } .greenboxtransparent, .downloadtransparent { padding: 6px 9px; border: 1px solid #6c3; } /*Info Box */ .bluebox, .info{ padding: 6px 9px; background: #FFFF33; border: 2px solid #3399FF; color: 000000; } .blueboxtransparent, .infotransparent{ padding: 6px 9px; border: 1px solid #3399FF; } a:link { COLOR: #DC143C; /* #0000FF */ } a:visited { COLOR: #DC143C; /* #800080 */ } a:hover { color: #ffffff; background-color: #00BFFF; } } a:active { color: #ffffff; background-color: #00BFFF; } /*Navigation*/ #Navigation { float: right; background: #192839 url(images/bg_nav_left.gif) left bottom no-repeat; } #Navigation ul { float: left; background: url(images/bg_nav_right.gif) right bottom no-repeat; padding: 0 .8em 2px; margin: 0; } #Navigation li { float: left; list-style: none; margin: 0; background: none; padding: 0; } #Navigation li a { float: left; padding: 0 1em; line-height: 25px; font-size: 1.2em; color: #D0D0D0; text-decoration: none; margin-bottom: 2px; } #Navigation li.current a, #Navigation li.current a:hover { border-bottom: 2px solid #176092; background: #192839; margin-bottom: 0; cursor: default; color: #D0D0D0; } #Navigation li a:hover { color: #fff; border-bottom: 2px solid #4082ae; margin-bottom: 0; } #Navigation li.current a, #Navigation li.current a:hover { border-bottom: 2px solid #176092; background: #192839; margin-bottom: 0; cursor: default; color: #D0D0D0; }
非常感谢您提供的所有帮助！
工作演示
jQuery代码
$(function() { $("div.NavSubhead").hide(); $('#Navigation li a').hover( function(){$(this).next().stop(false, true).fadeIn(500);}, function(){$(this).next().stop(false, true).fadeOut(500);} ); });
注意我添加了一个click事件处理程序，以防止对demo中的anchor元素进行默认操作
您可能还希望分别在每个事件处理程序中的fade命令之前slideDown()和slideUp() ，以使动画更流畅
$('#Navigation li a').hover( function(){$(this).next().stop(false, true).slideDown().fadeIn(500);}, function(){$(this).next().stop(false, true).slideUp().fadeOut(500);} );
您可能还想看一下jQuery手风琴 ，它基本上可以完成您在这里所做的工作，但也有一些额外的选项。
编辑：
两次更新后，我都知道问题所在。 您正在使用的幻灯片插件是针对Mootools JavaScript框架的。 这里提供的代码适用于jQuery JavaScript框架。 虽然可以在同一页面上的站点上使用这两个框架，但两个框架都将一个对象分配给$用于选择，并且每种情况下的对象具有不同的方法，属性等。因此，要使两个框架都能正常工作同时我们需要避免这种冲突。 幸运的是，jQuery有一个命令可以轻松解决这个问题， noConflict() ，它将释放$简写，以便其他框架可以使用它。 请特别注意页面中必须包含的顺序。
因此，为了使代码正常工作，脚本的结构需要如下所示
....
jQuery有很多很棒的幻灯片和灯箱插件可以提供与你链接的Mootools类似的效果。
我认为，除非对某些特定的function需求绝对必要，否则我坚持在我的网站中只使用一个JavaScript框架。 这不仅避免了冲突，而且通常还有一些方法可以构建到实现另一个框架的框架中。 即使框架没有将该function作为核心库的一部分，框架也被设计为可扩展的，因此，具有允许开发插件和扩展function以满足需求的体系结构。
这对我有用。 您可能应该在标记中保持一致，并且在两种情况下都会在其关联链接之后显示隐藏文本。
$(document).ready(function() { $('.NavSubhead').hide(); $('li.hovertriggerssubhead').hover( function() { $('.NavSubhead', $(this)).show(); }, function() { $('.NavSubhead', $(this)).hide(); } ); });
我没有测试过这个，但我认为它应该有效：
$(document).ready(function() { //first method $(".NavSubhead").hide(); $('#Navigation li').hover( function(){$('div.NavSubhead', this).fadeIn(500);}, function(){$('div.NavSubhead', this).fadeOut(500);} ); }