jQuery 悬停（显示-隐藏）

Question

我在 jQuery 中使用显示/隐藏来处理弹出菜单。我也想为我的示例制作一个绿色矩形。

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

  $(document).ready(function(){
$('.rectangle1').hide();

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

Answer 1

您可以通过在第一个函数中切换它并在第二个函数中不执行任何操作来尝试类似的操作。重要的是不要离开第二个函数，因为如果留下第二个函数，第一个函数将取代它，我们就开始了问题。

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

演示

Answer 2

在内部使用

.rectangle1

区域：

<div class="rectangle1">
    <div class="rectangle1-area"></div>
</div>

在此区域添加顶部填充。所以你的区域将是无间隙的。 您还可以将 display: none; 添加到

.rectangle1

，而不是将其隐藏在 JavaScript 中。

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

使用计数变量。因此，如果您的鼠标位于

#rectangle

或

.rectangle1

上，则 var 为 1。 如果鼠标移出 - var 为 0 => 隐藏

.rectangle1

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

Answer 3

您将无法单击弹出窗口，因为一旦您的鼠标没有悬停在蓝色矩形上，另一个矩形就会消失。

为了实现这一点，您必须使两个矩形彼此相邻，并在将鼠标悬停在第二个矩形上时也显示第二个矩形，或者在单击第一个矩形时隐藏/悬停。然后你就可以通过点击来实现一些事情

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