jQuery找到div帮助

我目前正在构建一个菜单栏，其中包含图标，这些图标在hover时显示上下文子菜单。 基本上，当鼠标hover在图标上时会出现一个弹出菜单/工具提示（包含更多选项），但图标本身也应该是可点击的。

到目前为止，我为每个菜单项使用以下HTML构造和jQuery：

 
 **insert profile menu options** 
 
 
 
 **insert search menu options** 
  

和

 $(".menu-item").hover(function() { $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element $(this).find("div").hide(); }); }); 

我想要做的是将HTML更改为如下所示（因此我可以将onClick链接应用于“profiles”div）：

 
 
 **insert menu options**  

但是，我不知道如何修改jQuery以找到匹配的div在hover时显示。 相关的工具提示/弹出菜单div将始终为xxxx-tip（其中xxx是父div的名称）。

作为一个例子，我想它会看起来像这样（记住我对jQuery知之甚少，所以我很清楚这看起来很愚蠢）：

 $(".menu-item").hover(function() { $.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element $.find("div").attr('id'+"-tip").hide(); }); }); 

总结一下：我需要修改jQuery以根据父div的ID +字符串“-tip”显示div

希望这不会太混乱。 任何帮助非常感谢:)

Answer 1

不确定我完全理解你想要什么，但也许尝试更像这样的东西：

 $(".menu-item").hover( function() { $(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE }, function() { //hide tooltip when the mouse moves off of the element $(this).find(".tip").hide(); } ); 

编辑 ：如果tip元素不是菜单项div的子元素，这可能有效：

 $(".menu-item").hover( function() { $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE }, function() { //hide tooltip when the mouse moves off of the element $('#' + this.id + '-tip').hide(); } ); 

Answer 2

不要在你所盘旋的东西的PARENT中找到div的名称，而是使用jQuery找到工具提示，它是你所盘旋的东西的一个孩子……搜索DOM，而不是UP。

使用jQuery的$（this）运算符 ……

 $('.menu-item').hover(function(){ $(this).find('.tip).fadeIn(); }, function() { $(this).find('.tip).fadeOut(); }); 

Answer 3

我不是100％清楚这里的目标，但你可以通过ID得到你的div，如下所示：

 $(".menu-item").hover(function() { $(this).find(".tip").fadeIn("fast").show(); }); 

或者在CSS中：

 .menu-item .tip { display: none; } .menu-item .tip:hover, .menu-item:hover .tip { display: auto; }