jQuery hover (show-hide)

问题

I work on popup menu in jQuery with show/hide. I want to make a green rectangle for my example clikable too.

Example: http://jsfiddle.net/Q5cRU/27/

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

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

回答1:

Use an area for .rectangle1 inside:

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

Add a top padding to this area. So your areas will be gapless. Also you can add a display: none; to .rectangle1 instead of hiding it in JavaScript.

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

Use a count variable. So if your mouse is over #rectangle or .rectangle1 the var is 1. If mouseout - the var is 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();
        }
    });
});

Demo here.

回答2:

You can try something like this by toggling it in the first function and doing nothing in the second function. It is important to not leave the second function, since if it is left, the first function will take place of it, and we come to the start of the problem.

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

DEMO

回答3:

You will not be able to click your popup, because as soon as you mouse is not hovering on the blue rectangle, the other rectangle disappears.

To make it possible, you will have to make the two rectangles right next to each other, and make the second rectangle also display when you are hovering over it, or hide/hover on click of the first rectangle. Then you can make something happen on click using

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

来源：https://stackoverflow.com/questions/27403146/jquery-hover-show-hide

标签

jquery

hover

hide

show