jQueryhover(show-hide)

我使用show / hide在jQuery中使用弹出菜单。 我想为我的例子做一个绿色矩形clikable。

示例: http : //jsfiddle.net/Q5cRU/27/

$(document).ready(function(){ $('.rectangle1').hide(); $('#rectangle').hover(function() { $('.rectangle1').show() },function() { $('.rectangle1').hide() }); }); 

.rectangle1里面使用一个区域:

 

在此区域添加顶部填充。 所以你的领域将是无缝的。 你也可以添加一个display:none;.rectangle1而不是将其隐藏在JavaScript中。

 .rectangle1 { width: 140px; padding-top: 10px; display: none; } .rectangle1-area { width: 100%; height: 150px; background: #37CA90; } 

使用计数变量。 因此,如果您的鼠标位于#rectangle.rectangle1var为1 。 如果mouseout – var为0 => hide .rectangle1

 $(document).ready(function(){ var count = 0; $('#rectangle, .rectangle1').mouseenter(function() { count++; $('.rectangle1').show(); }); $('#rectangle, .rectangle1').mouseleave(function() { count--; if (count == 0) { $('.rectangle1').hide(); } }); }); 

在这里演示。

您可以通过在第一个函数中切换它并在第二个函数中不执行任何操作来尝试这样的事情。 重要的是不要离开第二个函数,因为如果它离开,第一个函数将取代它,我们就会遇到问题的开始。

 $(document).ready(function () { $('.rectangle1').hide(); $('#rectangle').hover(function () { $('.rectangle1').toggle(); }, function () { // leave it empty }); }); 

DEMO

您将无法单击弹出窗口,因为只要您的鼠标没有hover在蓝色矩形上,另一个矩形就会消失。

为了使其成为可能,您必须使两个矩形彼此相邻,并且当您将鼠标hover在其上时使第二个矩形也显示,或者在单击第一个矩形时隐藏/hover。 然后你就可以点击使用了

 $("#ID_OF_RECTANGLE_TWO").click(function(){DO_SOMETHING_HERE;});