鼠标悬停不显示隐藏的 div

发布于 2024-11-19 02:27:22 字数 493 浏览 1 评论 0原文

<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

原文

<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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽袖吟 2024-11-26 02:27:22

试试这个：

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

$ 未定义。

try this instead:

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

$ is undefined.

回复收藏 0 原文

掩饰不了的爱 2024-11-26 02:27:22

您尚未将代码包装在 jQuery DOM 就绪函数中。将其放在

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

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

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.

回复收藏 0 原文

三月梨花 2024-11-26 02:27:22

尝试将 #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();
    });
});

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

回复收藏 0 原文

~没有更多了~