0

我有以下代码，我希望当用户将鼠标移到 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>
4

4 回答 4

2

你（曾经）失踪了#：

   ||
   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);
于 2012-04-14T06:43:52.207 回答
1

Invisible Elements 不能触发 mouseover 事件，因为它们没有宽度和高度，因此在文档中没有要悬停的位置。

也许css不透明度可以帮助你？另请参阅此示例。

于 2012-04-14T08:02:51.027 回答
0

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

应该

 $('#myDiv').css({ "visibility": "visible" });
于 2012-04-14T06:45:53.093 回答
0

问题是当您隐藏 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"});
}
于 2012-04-14T08:05:26.813 回答