Javascript的鼠标输入输出事件

初学者的问题

当鼠标从父div输入/输出时，我想显示/隐藏一个内部div。我首先尝试了onmouseover、onmouseout事件，但问题是onmouseover在鼠标悬停在div上时不停地触发，我希望它只触发一次

我发现了一些可能对我有帮助的事件，但我不知道该将这些代码放在哪里，因为我的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>

任何帮助

您可以使用和事件

您可以将代码放在中，并使用这些事件绑定代码

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

您可以使用和事件

您可以将代码放在中，并使用这些事件绑定代码

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

css

css

---

这就是我在脚本中使用的内容

文档完全加载$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);
      });
}

---

这就是我在脚本中使用的内容

文档完全加载$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);
      });
}

使用以下命令：

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

用父div的id替换父div id使用以下方法：

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

---

将父div\u id替换为父div的id

谢谢大家。作为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);
        });
    });
}

---

谢谢大家。作为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);
        });
    });
}

---

---

请把你的密码贴出来。这使我们更容易帮助您。请张贴您的代码。这使我们更容易帮助您。问题是我的div存在于模板中。所以我没有身份证你有阶级或任何你认为可以用来识别div的东西吗？也许我需要看看你的html结构是的，我想这就是我应该做的。使用类而不是ids问题在于我的div存在于模板中。所以我没有身份证你有阶级或任何你认为可以用来识别div的东西吗？也许我需要看看你的html结构是的，我想这就是我应该做的。使用类而不是ids问题在于我的div存在于模板中。所以我没有ID，问题是我的div存在于模板中。所以我没有ID，问题是我的div存在于模板中。所以我没有id在渲染模板时不可能添加id吗？@iarwain01:不，它是自动生成的。因为将创建许多实例。如果没有id，我不知道如何帮助。谢谢，似乎我找到了它。我将改用类。问题是我的div存在于模板中。所以我没有id在渲染模板时不可能添加id吗？@iarwain01:不，它是自动生成的。因为将创建许多实例。如果没有id，我不知道如何帮助。谢谢，似乎我找到了它。我将使用类。我想使用动画，所以我选择了JQuery。我想使用动画，所以我选择了JQuery。