在鼠标悬停时显示/隐藏div不起作用

Question

我有以下代码，我想当用户将鼠标移到div上时将显示，而当鼠标移出div时它将隐藏。 一切似乎都不错，但没有用。 谁能为我指出错误？

 <script type="text/javascript">

    $(document).ready(function () {


        $(document).delegate('#myDiv', 'mouseover', function () { mouse_OverDiv(); });
        $(document).delegate('#myDiv', 'mouseout', function () { mouse_OutDiv(); });
        function mouse_OverDiv() {

            $('#myDiv').css({ "visibility": "visible" });

        }
        function mouse_OutDiv() {

            $('#myDiv').css({ "visibility": "hidden" });

        }
    });

</script> 
<body>
<form id="form1" runat="server">
<div id="myDiv" style="visibility:hidden">
this is my  div</div>

</form>
</body>

Answer 1

您缺少# ：

   ||
   vv
$('#myDiv').css({ "visibility": "visible" });

顺便说一句，您可以使用:hover选择器仅使用CSS来完成此操作。 同样delegate()被替换为on() 。 最后，您无需创建匿名函数即可调用另一个函数，您只需执行以下操作：

    $(document).delegate('#myDiv', 'mouseover', mouse_OverDiv);

   // Notice there's no `()` invoking the function 
   // since you're using it as a reference.

编辑

试试这个：

var $div = $('#myDiv'),
    hoverIn = function(){
        $div.css('visibility', 'visible');
    },
    hoverOut = function(){
        $div.css('visibility', 'hidden');
    };

$('#myDiv').hover(hoverIn, hoverOut);

Answer 2

不可见元素无法触发鼠标悬停事件，因为它们没有宽度和高度，因此在文档中没有要悬停的位置。

也许CSS的不透明度可以帮助您？ 另请参见此示例。

Answer 3

$('myDiv').css({ "visibility": "visible" });

应该

 $('#myDiv').css({ "visibility": "visible" });

Answer 4

问题是，当您隐藏div时，无法再次将鼠标悬停在它上面。 检查这个样本

$(document).delegate('#myDiv', 'mouseover', function() {
    mouse_OverDiv();
});
$(document).delegate('#myDiv', 'mouseout', function() {
    mouse_OutDiv();
});

function mouse_OverDiv() {
    $('#myDiv').css({"color": "red"});
}

function mouse_OutDiv() {
    $('#myDiv').css({"color": "blue"});
}

在鼠标悬停时显示/隐藏div不起作用

问题描述

4 个解决方案

解决方案1
2 2012-04-14 06:43:52

解决方案2
1 已采纳 2012-04-14 08:02:51

解决方案3
0 2012-04-14 06:45:53

解决方案4
0 2012-04-14 08:05:26

在鼠标悬停时显示/隐藏div不起作用

问题描述

4 个解决方案

解决方案1 2 2012-04-14 06:43:52

解决方案2 1 已采纳 2012-04-14 08:02:51

解决方案3 0 2012-04-14 06:45:53

解决方案4 0 2012-04-14 08:05:26

解决方案1
2 2012-04-14 06:43:52

解决方案2
1 已采纳 2012-04-14 08:02:51

解决方案3
0 2012-04-14 06:45:53

解决方案4
0 2012-04-14 08:05:26