浮动层的显示与隐藏

但一个区域，鼠标完全放在上面，就会出现一个背景层，移开，然胡隐藏。当鼠标横扫过去，很快的时候，浮动层会停止上面不显示。

修改后的代码：

html：

 1 <div class="box3">
 2             <php>if($arroundTravelInfo){</php> 
 3             <img class="arroundImg" src="{$arroundTravelInfo.img}" />
 4             <div class="nearbyBlackBox">
 5                 <span class="span1">{$arroundTravelInfo.product_name}</span>
 6                 <span class="span2">{$arroundTravelInfo.sale|default="0"}会去</span>
 7                 <span class="span3">
 8                     <span class="s1">￥{$arroundTravelInfo.price_current|default="0"}</span>
 9                     <span class="s2">￥{$arroundTravelInfo.price|default="0"}</span>
10                 </span>
11                 <a href="{$arroundTravelInfo.url}">我想去</a>
12             </div>
13             <php>}</php>
14             <div class="nearbyBlackBoxBg"></div>
15             
16         </div>
17            
18         <div class="box3_detail" style="display:none;">
19                <img src="{$arroundTravelInfo.img}" />
20             <div class="nearbyBlackBox" onclick="window.open('{$arroundTravelInfo.url}')">
21             <span class="span1">{$arroundTravelInfo.nearby_name}</span>
22                <div class="blackBox_p">{$arroundTravelInfo.seo_description}</div>
23                <span class="span3">
24                     <span class="s1">￥{$arroundTravelInfo.price_current|default="0"}</span>
25                     <span class="s2">￥{$arroundTravelInfo.price|default="0"}</span>
26             </span>
27                <span class="span2">{$arroundTravelInfo.sale|default="0"}会去</span>
28                <a href="{$arroundTravelInfo.url}">我想去</a>
29                </div>
30             <div class="nearbyBlackBoxBg"></div>
31         </div>

js：

var mflag = false;

function bgShow() {
    $('.box3_detail').show();
    $('.box3').hide();
}

function bgHide() {
    if(!mflag){
        $('.box3_detail').hide();
        $('.box3').show();
    }
}
$('.box3 img.arroundImg').mouseenter(function(){
        bgShow();
    });
    
    $('.box3 img.arroundImg').mouseleave(function(){
        window.setTimeout(bgHide, 10);
    });
    
    $('.box3_detail').mouseover(function(){
        mflag = true;
    });
    
    $('.box3_detail').mouseleave(function(){
        mflag = false;    
        bgHide();
    });

 

posted @ 2013-11-07 16:44  幻星宇  阅读(675)  评论(0)  编辑  收藏  举报