Javascript的鼠標輸入輸出事件

Question

來自初學者的問題..

當鼠標從父div進入/退出時，我想顯示/隱藏內部div。 我首先嘗試使用onmouseover ， onmouseout事件，但問題是onmouseover繼續射擊而鼠標懸停在div上，我希望它只觸發一次。

我發現可能對我有幫助的JQuery事件，但我不知道在哪里可以放置此代碼，因為我的div存在於控件的模板中，並且div沒有onload事件。

<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>

任何幫助！

Answer 1

您可以使用mouseenter和mouseleave事件。

您可以將代碼放入並綁定這些事件。

<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

謝謝大家。 正如YNhat 所說 ，我必須使用類而不是ID。 這是我使用的代碼，它運行良好。

$(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

這是我在腳本中使用的。

文檔完全加載后（ $(document).ready ）將綁定鼠標懸停事件。

然后，當我進入時，我解除了事件的綁定（以防止它發送垃圾郵件）並綁定mouseleave事件。

$(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

用這個：

<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>

將“parent_div_id”替換為父div的id