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