jquery悬停显示/隐藏问题

Question

我试图设置，以便当你悬停在类.object1 - >反过来应该揭示.obj_1，当你没有徘徊它，它应该隐藏.obj_1。我的代码可能有点小，谢谢你的帮助！

$(document).ready(function() { 
    $(".obj_1 , .obj_2").hide(); 
     }); 
     $(".object1").hover(
     function() { $(".obj_1").show(); }, 
     function() { $(".obj_2").hide(); } 
    ); 
     $(".object2").hover(
     function() { $(".obj_2").show(); }, 
     function() { $(".obj_1").hide(); } 
    ); 

Answer 1

很简单，它应该是

$(document).ready(function() { 
    $(".obj_1 , .obj_2").hide(); 
     }); 
     $(".object1").hover(
     function() { $(".obj_1").show(); }, 
     function() { $(".obj_1").hide(); } 
    ); 
     $(".object2").hover(
     function() { $(".obj_2").show(); }, 
     function() { $(".obj_2").hide(); } 
    ); 

的 “悬停” 处理函数签名（mouseInHandler，向mouseOutHandler）。 对于object1，您希望在mouseIn上显示obj_1，并将其隐藏在mouseOut上。 您不需要在object1悬停处理程序上引用obj_2。

退房拨弄我做here

仅供参考 - 悬停事件行事怪异，当你有复杂的内部内容。 （例如，另一个div内的div等）。我建议你使用"mouseenter"和"mouseleave"

更新应答后实现这一一个下拉菜单问题

下拉在CSS菜单是一个很好的例子，其中“悬停”是不够的 - >因为子菜单消失，一旦你不在链接了..这不是我们想要的。 （？应该）

1. 它们可以用纯CSS
2. 取得的HTML结构是很重要的：

   它需要注意的下拉菜单3样东西是很重要的。

例如，请考虑以下的结构，而不是：

<ul class="menu"> 
    <li> 
    </li> 
    <li> 
     <ul class="menu"> 
     <li> 
     </li> 
     </ul> 
    </li> 
</ul> 

这种结构是递归的 - 你可以有子菜单的无限水平 - 对“礼”和的mouseenter /鼠标离开会因为子菜单举行是“李”项目的一部分。

要看到这个动作在my fiddle看看

还请注意，我删除从onload事件代码的第一个“隐藏”，并用CSS取代它“显示：无” - 它解决了页面上闪烁负载（闪烁方式 - 第一子菜单显示，而且一旦页面加载，我们将其隐藏。）

一个CSS的解决方案将包括与它“盘旋”（是的，悬停..）

您选择在google中搜索时可以找到大量有关它的博客文章。

Here is the first one I found.