jQuery悬停（show-hide）

问题描述

我使用show / hide在jQuery中的弹出式菜单上工作。我想为我的示例中的一个可伸缩矩形做一个绿色矩形。

示例：

  
使用区域。矩形1 里面：
 < 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; 
背景：＃37CA90; 
} 
  
使用计数变量。因此，如果您的鼠标超过 #rectangle 或 .rectangle1 ， var为1 。 
如果mouseout  -   var为0  =>隐藏 .rectangle1  
 
 
 <$ （函数（））{
 var count = 0; 
 $（'＃rectangle，.rectangle1'）。 {
 count ++; 
 $（'。rectangle1'）。show（）; 
}）; 
 
 $（'＃rectangle，.rectangle1'）。mouseleave （function（）{
 count--; 
 if（count == 0）{
 $（'。rectangle1'）。hide（）; 
} 
 }）; 
}）; 
  

Demo 。

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

解决方案

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.

这篇关于jQuery悬停（show-hide）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！