Question

In Jquery is there a way to stop the mouseout() function from stop activating when you go over a certain div it isn’t a child either. My html code.

 <div class="featured">
            <div class="featured_top">
                    <p><span class="theme">Theme</span> Transparent </p>                                        
            </div>
            <div class="pic" style="background: blue">
                <!-- image -->                              
            </div>
            <div class="featured_des">
                <p> this is awesome theme </p>
            </div>                                  
  </div>

my js(jQuery)

$(document).ready(function(){
      $(".pic").mouseover(function(){
        $(this).animate({
            width: 0                        
            });
        });

        $(".pic").mouseout(function(){
            $(this).animate({
                width: 214                      
            });

             });
       });

So my question is can you stop the mouseout() function from activating when it is featured_des div. atm it animates the width of the .pic class which works fine but when it finishes animate the cursor is over the featured_des which activates the mouseout and hides the description again

example:: http://www.grubber.co.nz/developer/_social_development/market.html

Answer 1

Add an wrapper around your pic and featured_des.

    <div class="picwrapper">
        <div class="pic" style="background: blue">
            <!-- image -->                              
        </div>
        <div class="featured_des">
            <p> this is awesome theme </p>
        </div>
    </div>

Then JS:

$('.picwrapper').hover(function() {
    $(this).find('.pic').animate({ width: 0 });
}, function() {
    $(this).find('.pic').animate({ width: 214 });
});