Question

我使用show / hide在jQuery中使用弹出菜单。我也希望为我的例子制作一个绿色矩形clikable。

  $(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
    });
});

DEMO

Answer 2

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

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

点击一下

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

Answer 3

在.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 。如果是mouseout - var为0 =＆gt;隐藏.rectangle1

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

    $('#rectangle, .rectangle1').mouseleave(function() {
        count--;
        if (count == 0) { 
            $('.rectangle1').hide();
        }
    });
});

演示here。

jQuery悬停（show-hide）

3 个答案: