多分奇妙な質問 -
非常にシンプルなスライドショーをデザインしました。スライドショーの一部には、スライドショーの div にカーソルを合わせると表示されるテキストが含まれています。スライドショーの div からマウスを離すと、このテキストは消えます。現在表示されているスライドでは消えます。しかし、回転すると、以前はテキストが非表示になっていたスライドがまだ表示されていることがわかります (おそらく、親が既に非表示になっている要素を非表示にできないためです)。そう...
親が隠されている間にこれらの子要素を非表示にする方法はありますか?
ここにいくつかのコードがあります。もっと提供できます。
$("#banner").hoverIntent(function(){
$(".bannercontrols, .bannerblurb").show('slow');
clearTimeout(timer);
},function(){
$(".bannercontrols, .bannerblurb").hide('slow');
timer = setTimeout(function(){ beginRotation(); },slidetime);
});
助けてくれてありがとう。以下の HTML - 非常に長いですが、セットアップのアイデアが得られます - すべてのさまざまな部分が事前に書き込まれ、必要に応じて非表示/表示されます。
<div id="banner" style="position:relative; width:595px; height:254px; background-color:#000; margin:0 0 7px 30px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;">
<div style="position:absolute; width:595px; height:254px;">
<img class="bannerimg"
src="williams-ftr.jpg" />
<img class="bannerimg"
src="ftr.jpg" />
<img class="bannerimg"
src="cassin-ftr.jpg" />
<img class="bannerimg"
src="what-do-we-do-feature.jpg" />
</div>
<div id="banner-prev" class="bannercontrols" style="position:absolute; z-index:999; top:100px; left:5px; cursor:pointer;">
<img width="25" src="/images/banner-prev.png" />
</div>
<div id="banner-next" class="bannercontrols" style="position:absolute; z-index:999; top:100px; right:5px; cursor:pointer;">
<img width="25" src="/images/banner-next.png" />
</div>
<div style="position:absolute; text-align:right; padding:3px 5px; color:#FFF; width:585px; left:0; top:0; background-image:url(/images/black-55.png)">
<div style="font-size:10px;">
<em>Wednesday, February 13th, 2013</em>
</div>
</div>
<div class="textblock" style="position:absolute; padding:5px 10px 12px 5px; color:#FFF; width:580px; height:auto; left:0; bottom:0; background-image:url(/images/black-55.png);">
<div class="bannertext" style="display:none">
<a class="banner" href="/">
<div class="bannertitle">
TITLE
</div>
<div class="bannerblurb"
style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
blurb blurb blurb </div>
</a>
</div>
<div class="bannertext" style="display:none">
<a class="banner" href="/">
<div class="bannertitle">
TITLE
</div>
<div class="bannerblurb"
style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
blurb blurb blurb </div>
</a>
</div>
<div class="bannertext" style="display:none">
<a class="banner" href="/">
<div class="bannertitle">
TITLE
</span>
</div>
<div class="bannerblurb"
style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
blurb blurb blurb </div>
</a>
</div>
<div class="bannertext" style="display:none">
<a class="banner" href="/">
<div class="bannertitle">
<span style="font-size:22px;"><span style="font-size: 80%;">TITLE
</span>
</div>
<div class="bannerblurb"
style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
blurb blurb blurb </div>
</a>
</div>
</div>
<div style="position:absolute; width:595px; height:8px; left:0; bottom:0; background-image:url(/images/black-55.png)">
<table class="fullbannerblock" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div index="0" class="bannerblock"></div>
</td>
<td>
<div index="1" class="bannerblock"></div>
</td>
<td>
<div index="2" class="bannerblock"></div>
</td>
<td>
<div index="3" class="bannerblock"></div>
</td>
</tr>
</table>
</div>
</div><!-- /banner -->