I want to show the slider div until the mouse is over the container div with many inner divs in jquery?

Question

I have a container containing two divs A nd B

A contains few img tags while B contains a slider ..

The structure is as follows

<div id="container">
   <div id="mainCHimage">
      <img id="favIcon">
      <img id="mainImg">
   </div>
   <div id="imageSlider">
      <img class="arrow left">
      <div class="images" id="images_zazzle_tshirts">
        <a href="..344/zazzle_tshirts-v4-en/" rel="attachment wp-att-341"></a>
        <div class="imageHolder catMatchB" style="display: block;">
        <a href="http://santasrecipies.com/344/zazzle_tshirts-v4-en/"></a>
        <a href="http://productUsage.php?prodId=39" target="_blank">
           <div class="sliderImgWrp">
           <img src="../shop/uploads/large/1367904170_link-10351582.jpg">
           </div>
        </a>
        </div>
      </div>
      <img class="arrow right">
   </div>
</div>

I just want the imageslider shud stay until i am mouseout of whole container div..But inner div comes and are conflicting .. i have written the jquery functions ..U cn check in my demo ... Plz help me out...

Not working demo

Answer 1

Do not use mouseout or mouseover events but mouseenter and mouseleave - they trigger only if you enter/leave the element you attached them to; 100% no conflicts.