私はこのサイトに不慣れで、助けが必要です!
ロールオーバーするとテーブルが表示され（完了しました）、独自の画像をタブに変更するボタンが必要ですが（そうします）、マウスがボタンまたはそのボタンを離れるまで、そのロールオーバータブの画像を保持しますそれぞれのテーブル（これが問題です）。
基本的に、画像を変更したり、テーブルを適切に展開したり非表示にしたりするのは非常に簡単ですが、ボタンやテーブルから離れたときにボタンを元の画像に戻すことはできません。
通常のロールオーバーのように動作させるコード行を取得しましたが、下のテーブルが同じオブジェクト内にネストされておらず、ロールオーバーしたままにしたいときに画像がロールバックされるため、これは役に立ちません。
ボタンとそのテーブルがネストされていないという事実は、子や祖先をトラバースできないため、事態を複雑にしていることは承知していますが、それを回避する方法があることを願っています。
以下は私のサンプル コードです。これは、私が働いている人がさまざまな部分の連続したアニメーションをたくさん欲しがっていたので、私がやろうとしていることにはかなり厄介です。
HTMLは次のとおりです。
<div id="topNavBar">
<a href="#" class="topButton" id="how">
<img src="images/howBut.jpg" alt="How" name="How" width="140" height="44" border="0" />
</a>
<a href="#" class="topButton" id="who">
<img src="images/whoBut.jpg" alt="Who" name="Who" width="140" height="44" border="0" />
</a>
</div><!--end of topNavBar-->
</div><!--end of pageHeader, part of earlier code-->
<div id="subMenus"><!--serves as a 150px spacer to give room for expanding tables-->
<div class="subMenuBackground" id="how">
<table class="subMenuOptions" border="0" cellpadding="0" cellspacing="1">
<tr><td>Table stuff goes out here</td></tr>
</table>
</div>
<div class="subMenuBackground" id="who">
<table class="subMenuOptions" border="0" cellpadding="0" cellspacing="1">
<tr><td>Table stuff goes out here</td></tr>
</table>
</div>
</div><!--End of subMenus-->
そして、ここに私の JavaScript/jQuery があります:
$(document).ready(function(){
$('.subMenuOptions').css({'opacity': 0.0});
$('.subMenuBackground').css({
'height': '0px',
'padding': '0px',
'width': '0px',
'marginLeft': 'auto',
'marginRight': 'auto',
});
// ***This makes a normal rollover just fine***
// $('a#how img').mouseenter(function(){
// $(this).attr('src', $(this).attr('src').split('.').join('Over.'));
// }).mouseleave(function(){
// $(this).attr('src', $(this).attr('src').split('Over.').join('.'));
// });
$('#how').mouseenter(function(){
$('.subMenuBackground#how').animate({paddingTop:'2px'}, 'slow', 'quartEaseInOut')
.animate({width:'100%', paddingRight:'2px', paddingLeft:'2px'}, 350, 'circEaseOut')
.animate({height:'100%', paddingBottom:'2px'}, 250, 'circEaseOut', function(){
$(this).children().animate({opacity:1}, 250, 'circEaseOut');
});
// This works to make the rollover tab image to appear, but mirroring this function in the other two .mouseleave events doesn't work :(
$('a#how img').attr('src', 'howButOver.jpg');
});
$('.subMenuBackground#how').mouseleave(function(){
$('.subMenuBackground#how').animate({width:'0%', paddingRight:'0px', paddingLeft:'0px'}, 100, 'quartEaseIn')
.animate({height:'0%', paddingTop:'0px', paddingBottom:'0px'}, 100, 'quartEaseIn', function(){
$(this).children().animate({opacity:0}, 1, 'quartEaseOut');
});
});
// For whatever reason, the previous function did not work if I rolled over other buttons - the table would not disappear, so I had to make this specific function for when you entered another top nav button
$('.topButton:not(#how)').mouseenter(function(){
$('.subMenuBackground#how').animate({width:'0%', paddingRight:'0px', paddingLeft:'0px'}, 100, 'quartEaseIn')
.animate({height:'0%', paddingTop:'0px', paddingBottom:'0px'}, 100, 'quartEaseIn', function(){
$(this).children().animate({opacity:0}, 1, 'quartEaseOut');
});
});
// I was hoping it would be as easy as this, but this does not work.
$('#how').mouseleave(function(){
$('a#how img').attr('src', 'howBut.jpg');
});
});