jQuery: Hiding hidden elements

Question

Maybe an odd question -

I have designed a very simple slideshow. Part of the slideshow includes some text which appears when you hover over the slideshow div. When you mouseout of the slideshow div, this text should disappear - and it does on the slide which is currently displayed. But upon rotation, one finds that the slides which were previously hidden the text is still showing (presumably because one cannot hide an element whose parent is already hidden). So...

Is there anyway for me to hide these child elements while the parent is hidden?

Here is some code, I can provide more.

$("#banner").hoverIntent(function(){
    $(".bannercontrols, .bannerblurb").show('slow');
    clearTimeout(timer);
},function(){
    $(".bannercontrols, .bannerblurb").hide('slow');
    timer = setTimeout(function(){ beginRotation(); },slidetime);
}); 

Thanks for any help. HTML below - quite long, but gives you an idea of the set up - all the various parts are written in before hand, and then hidden/shown as needed.

<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

Child elements can be hidden, regardless if their parent element is hidden or not. I'm guessing the issue is caused by some other bug.