Question

<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>

#simple_sidenav-3 {
    visibility:hidden;
}

simple_sidenav-3是一个隐藏的div。那么为什么鼠标结束时不显示＃menu-item-58？

请在此处查看http://mentor.com.tr/wp/?page_id=164

Answer 1

试试这个：

jQuery("#menu-item-58").mouseover(function() { 
  jQuery("#simple_sidenav-3").css('visibility','visible'); 
});

$未定义。

Answer 2

您还没有将代码包装在jQuery DOM ready函数中。将它放在<script>标记之间：

$(document).ready(function()
{
    $("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
    $("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
}

这将在加载文档（页面）时将鼠标事件绑定到元素。

Answer 3

尝试将#simple_sidenav-3从visibility:hidden;更改为display:none;然后调用类似.slideDown()的内容以获得良好效果。

此外，这里对您的代码进行了一些改进：

jQuery(function() { //waits till the document is ready
    jQuery("#menu-item-58").mouseover(function () {
        jQuery("#simple_sidenav-3").slideDown();
    }).mouseout(function () {  //no need to use $("#menu-item-58") twice
        jQuery("#simple_sidenav-3").slideUp();
    });
});

mouseover不显示隐藏的div

3 个答案: