鼠标悬停不显示隐藏的 div答案

【问题标题】：mouseover doesn't show hidden div鼠标悬停不显示隐藏的 div
【发布时间】：2011-10-01 16:28:06
【问题描述】：

<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

【问题讨论】：

标签： javascript jquery css hover mouseover

【解决方案1】：

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

【讨论】：

display:none 完全不同。
它会做他想做的事，他现在可以使用.slideDown()，这对于翻转导航来说将是一个非常好的效果。
这不是要决定什么效果对别人的网站“非常好”，而是要回答他的问题。将元素设置为 display:none 将导致元素消失而不是隐藏它。
一旦我有足够的声誉我会的:)
@Talha 不论声誉等级如何，每个人都可以就他们提出的问题接受答案。

【解决方案2】：

试试这个：

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

$ 未定义。

【讨论】：

jQuery.ready(function(){ -- 我会假设。但我已经继续前进了。你的问题肯定在于 $ 未定义。

【解决方案3】：

您尚未将代码包装在 jQuery DOM 就绪函数中。把它放在你的 <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'); });
}

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

【讨论】：

嗯添加了，但仍然不可见。
@JamWaffles：你说对了一半。甚至 1/3 正确 ;) 我的意思是根据 jQuery documentation 这将在 DOM 准备就绪 时执行，而不是在页面完成加载时执行（这两个事件之间存在一些差异）。但是，是的，它应该被包裹起来。除了$ 别名不可用并且$ 在OP 指向的那个页面上是undefined - OP 应该使用jQuery 函数而不是$ 函数。
谢谢塔德克。你知道为什么$不能用吗？