jQuery mouseover event not working right?
<p>I have this code:</p>

<pre><code>$("document").ready( function () {
    $(".userPic").mouseover(function () {
        $(".changePic img").css("display", "block");
    })
    $(".userPic").mouseout(function () {            
        $(".changePic img").css("display", "none");             
    })
})
</code></pre>

<p>I have 2 DIVs and 1 image inside each them.</p>

<p>My problem is when you mouseover .changePic (which is inside .userPic) the mouseout event will fire and the image will not be displayed.</p>

<p>How I can apply the mouseover to all elements inside the main DIV .userPic? So when you mouseover the images and .changePic, the image will still be displayed and the mouseout event will not fire.</p>

<p>How can it be done?</p>

<p>HTML code:</p>

<pre><code> &lt;div class="accountPic"&gt;
              &lt;div class="userPic"&gt;
              &lt;img src="images/userPhoto.png" alt="" width="236" height="200" /&gt;   
              &lt;/div&gt;
              &lt;div class="changePic"&gt;&lt;a href="editUsers.php"&gt;&lt;img style="display: none;" src="images/config.png" alt="" width="13" height="14" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;/div&gt;
</code></pre>
