Mouse in-out events for Javascript
<p>question from a beginner..</p>

<p>I want to show/hide an inner div when the mouse enter/out from the parent div. I tried first with <code>onmouseover</code>, <code>onmouseout</code> events, but the problem is that <code>onmouseover</code> keep firing while the mouse over the div, and I want it to fire one time only.</p>

<p>I found <a href="http://api.jquery.com/mouseenter/" rel="nofollow">JQuery</a> events that might help me, but I don't know where can I put this code because my divs exist in a template for a control, and there is no <code>onload</code> event for the div.</p>

<pre><code>&lt;script type="text/javascript" language="javascript"&gt;
    // Where should I call this !!!
    function Init(sender) {
        $(sender).bind("mouseenter", function () {
            $(sender.childNodes[1], this).show(500);
        }).bind("mouseleave", function () {
            $(sender.childNodes[1], this).hide(500);
        });
    }

&lt;/script&gt;
</code></pre>

<p>Any help!</p>
