Javascript 的鼠标进出事件答案

【问题标题】：Mouse in-out events for JavascriptJavascript 的鼠标进出事件
【发布时间】：2011-03-17 09:33:09
【问题描述】：

来自初学者的问题..

当鼠标从父 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>

任何帮助！

【问题讨论】：

请张贴您的代码。这让我们更容易为您提供帮助。

标签： javascript jquery asp.net

【解决方案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>

【讨论】：

问题是我的 div 存在于模板中。所以我没有Id
你有类或任何你认为可以用来识别 div 的东西吗？也许我需要看看你的 html 结构
是的，我认为这是我应该做的。使用类而不是 IDs

【解决方案2】：

谢谢大家。作为 YNhat said，我必须使用类而不是 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);
        });
    });
}

【讨论】：

【解决方案3】：

css

.parent_div .inner_div
{
 display:none;
}

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

【讨论】：

我想用动画，所以我去了JQuery。

【解决方案4】：

这是我在脚本中使用的。

一旦文档完全加载 ($(document).ready)，mouseover 事件就会被绑定。

然后，当我在其中时，我取消绑定事件（以防止它向事件发送垃圾邮件）并绑定 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);
      });
}

【讨论】：

问题是我的 div 存在于模板中。所以我没有Id
渲染模板时不可以加个id吗？
@iarwain01：不，它是自动生成的。因为会创建很多实例。
没有id不知道怎么帮忙。
谢谢，好像找到了。我将改用类。

【解决方案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

【讨论】：

问题是我的 div 存在于模板中。所以我没有Id