Mouse in-out events for Javascript

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

You can use mouseenter and mouseleave events.

You can put your code in the and bind your with these events.

<script type="text/javascript" language="javascript">

    $(document).ready(function(){
        Init('.your_div_class');
    });

    function Init(sender) {
        $(sender).bind("mouseenter", function () {
            $(sender.childNodes[1], this).show(500);
        }).bind("mouseleave", function () {
            $(sender.childNodes[1], this).hide(500);
        });
    }

</script>

Answer 2

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);
        });
    });
}

Answer 3

css

.parent_div .inner_div
{
 display:none;
}

.parent_div:hover .inner_div
{
 display:block;
}

Answer 4

This is what I use in a script.

Once the document is fully loaded ( $(document).ready ) the mouseover event is bound.

I then unbind the event when I'm in it (to prevent it from spamming the event) and bind the mouseleave event.

$(document).ready(function() {

    $("#loginformwrapper").bind("mouseover", showLoginForm);

});

function showLoginForm() {
    $("#loginformwrapper").unbind("mouseover", showLoginForm);
    $("#loginform").animate({
        top: '+=80'
      }, 1000, function() {
          $("#loginform").bind("mouseleave", hideLoginForm);
      });
}

function hideLoginForm() {
    $("#loginform").unbind("mouseleave", hideLoginForm);
    $("#loginform").animate({
        top: '-=80'
      }, 1000, function() {
          $("#loginformwrapper").bind("mouseover", showLoginForm);
      });
}

Answer 5

Use this:

<script type="text/javascript"> 
    $(function(){
        var mydiv = $("#parent_div_id");
        $(mydiv).bind("mouseenter", function () {
            $(mydiv.childNodes[1], this).show(500);
        }).bind("mouseleave", function () {
            $(mydiv.childNodes[1], this).hide(500);
        });
    });
</script>

replace the "parent_div_id" with the id of your parent div