jQuery:隐藏隐藏元素

Question

可能有个奇怪的问题-

我设计了一个非常简单的幻灯片。幻灯片的一部分包括一些文本，当您将鼠标悬停在幻灯片显示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 -->

Answer 1

无论父元素是否隐藏，都可以隐藏子元素。我猜这个问题是由其他错误引起的。