鼠标悬停不显示隐藏的 div

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 is a hidden div. So why doesn't it show when mouse is over #menu-item-58?

Please check it here http://mentor.com.tr/wp/?page_id=164

Answer 1

try this instead:

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

$ is undefined.

Answer 2

You haven't wrapped your code in the jQuery DOM ready function. Put this between your <script> tags:

$(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'); });
}

This will bind the mouse events to the elements when the document (page) has been loaded.

Answer 3

Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.

Also, here's some improvements to your code:

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();
    });
});