0
JQueryを使い慣れていますが、私が作成しているサイトで使用したいと考えています。 Jquery：メニュー項目にカーソルを置くと、テキストが表示されます
李クラスhovertriggerssubheadとメニュー内の項目の上にマウスを置いたユーザーが、私はID NavSubheadと（LI内にネスト）のdivにあり、その下にいくつかのテキストを、表示したい
これは私の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>
以下site.cssで、私の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、ちょうど私のコードの誤植を見つけました...非常にわずかなタイプミスを修正するための投稿を編集しましたが、これはまだ解決策ではありません。 –