也许是一个奇怪的问题 -
我设计了一个非常简单的幻灯片。部分幻灯片包括一些文本,当您将鼠标悬停在幻灯片 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 -->