0
我是JQuery的新手，但希望在我正在构建的站点中使用它。Jquery：当鼠标悬停在菜单项上，显示文本
当用户将鼠标悬停在菜单中的项目与李类hovertriggerssubhead，我想显示ID为NavSubhead它下面的一些文字，坐落在div（嵌套李里）。我已经看了几个这样的例子，即在JQuery文档的FAQ和JQuery网站本身的代码中的食谱。
这是我的HTML代码：
<div id="Navigation">
<ul>
<li class="current">
<a href="index.html">Home</a></li>
<li class="hovertriggerssubhead">
<a href="gallery.html">Gallery</a>
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
</li>
<li class="hovertriggerssubhead">
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
<a href="contact.html">Contact</a></li>
</ul>
</div>
我想在我的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
任何帮助，将不胜感激。谢谢！
UPDATE：我已经尝试了许多答案，即使有一个工作演示，但它仍然无法正常工作，这很奇怪。由于包含表格，导航html的限制可能与任何机会有关吗？该表具有固定的宽度。除此之外，我不知道什么是问题，并且JQuery被正确引用。提前致谢！
UPDATE＃2：因为这可能是因为我的HTML有一些奇怪的限制而无法工作，所以我会在这里发布它。正如你可以看到下面，我也使用this幻灯片框架。
<html>
<head>
<title>MZ Photography</title>
<!-- Jquery Stuff -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
/*
$(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('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);}
);
});
</script>
<!-- End jquery stuff -->
<!-- Slideshow stuff begins here -->
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'30.jpg': { caption: '' },
'25.jpg': { caption: '' },
'21.jpg': { caption: '' },
'16.jpg': { caption: '' },
'11.jpg': { caption: '' },
'13.jpg': { caption: '' },
'12.jpg': { caption: '' },
'9.jpg': { caption: '' },
'4.jpg': { caption: '' },
'2.jpg': { caption: '' },
'3.jpg': { caption: '' },
'6.jpg': { caption: '' },
'7.jpg': { caption: '' },
'14.jpg': { caption: '' },
'8.jpg': { caption: '' },
'10.jpg': { caption: '' },
'15.jpg': { caption: '' },
'17.jpg': { caption: '' },
'22.jpg': { caption: '' },
'28.jpg': { caption: '' },
'26.jpg': { caption: '' },
'27.jpg': { caption: '' },
'24.jpg': { caption: '' },
'23.jpg': { caption: '' },
'19.jpg': { caption: '' },
'18.jpg': { caption: '' },
'20.jpg': { caption: '' },
'29.jpg': { caption: '' },
'31.jpg': { caption: '' },
'32.jpg': { caption: '' },
'1.jpg': { caption: '' },
'5.jpg': { caption: '' },
'33.jpg': { caption: '' },
'34.jpg': { caption: '' },
'35.jpg': { caption: '' },
'36.jpg': { caption: '' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: 'images/', thumbnails: false, width: 600});
});
//]]>
</script>
<!-- end Slideshow -->
<link rel="stylesheet" href="site.css">
</head>
<body>
<table width="980"> <!--980 -->
<tr>
<td width="880">
<table width="880"> <!--880-->
<tr>
<td align="left">
<div id="logo">
<img src="images/title.png" />
</div>
</td>
<td align="right"><!--MENU-->
<div id="Navigation">
<ul>
<li id="home" class="current">
<a href="#top">Home</a></li>
<li id="gallery" class="hovertriggerssubhead">
<a href="gallery.html">Gallery</a>
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
</li>
<li id="contact" class="hovertriggerssubhead">
<a href="contact.html">Contact</a></li>
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
</ul>
</div>
</td>
</tr>
</table>
<table width="700">
<tr><td><br></td></tr>
<tr>
<!-- we don't rly need this -->
<!-- How about about section here? -->
<td align="left" id="tdAbout">
<!--Recent Changes --> <!-- NM -->
<div id="aboutDiv">
<p class="yellowboxtransparent" id="about">
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!
</p>
</div>
<!-- About --> </td>
<td> </td>
<td align="center">
<!--Slideshow-->
<div align="center" id="show" class="slideshow">
<img src="images/1.jpg" alt="" />
</div>
</td>
<td align="right">
</td>
</tr>
<tr><td><br><br></td></tr>
<tr><!--<td align="left"> -->
<!--Copyright Statement-->
<!--<p class="copy">© Copyright 2009 by MZ. <br/>All Rights Reserved. </p>
</td><td align="right"><!--Links--><!--</td>--></tr></table>
</td>
<td><!--Right hand column -->
<div id="meDiv">
<p class="blueboxtransparent">
hi
</p>
</div>
</td>
</tr>
</table>
<br/><br/><br/><br/><br/>
<!-- Beneath -->
<div id="bottom">
<div class="leftfloat" id="divCopy">
<!--Copyright Statement-->
<p class="copy">© Copyright 2009 by MZ. All Rights Reserved. </p>
</div>
<div class="rightfloat" id="divLinks">
<ul id="linklist">
<li><a href="http://absolutely2nothing.wordpress.com">Blog</a></li>
<li><a href="http://twitter.com/maximz2005">Twitter - @maximz2005</a></li>
</ul>
</div>
</div>
</body>
</html>
下面是我的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;
}
非常感谢您的帮助！
oopsey，刚刚在我的代码中发现了一个错字...编辑帖子以修复非常轻微的错字，但这还不是解决方案。 – 2009-08-14 09:34:47