Question

question from a beginner..

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

I found JQuery 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 onload event for the div.

<script type="text/javascript" language="javascript">
    // 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);
        });
    }

</script>

Any help!

Answer 1

Thanks for everybody. as YNhat said, I have to use classes instead of Ids. and this is the code that I used and it’s work well.

$(document).ready(function () {
    InitEntities();
});

function InitEntities() {
    var parentDiv = $(".parentDivClass");

    parentDiv.each(function (index) {
        var childDiv = $(this).children(".childDivClass");    
        $(this).bind("mouseenter", function () {
            $(childDiv, this).show(250);
        }).bind("mouseleave", function () {
            $(childDiv, this).hide(250);
        });
    });
}