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不透明可以帮到你？另请参阅this example。

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 个答案: