0

我已经尝试搜索类似的问题并将这些回答用于我的情况，但要么我做错了（可能......），要么这不是我所需要的？

本质上，当悬停在#b-hover-nav 上时，我试图切换 .block-5。但是，我希望 .block-5 保持打开状态，以便用户可以阅读/与其中的链接进行交互......示例中的其他链接也是如此......

我已经发布在 jsfiddle (http://jsfiddle.net/9fcFv/) 上，但我也将其包括在下面：

#content {
     width: 400px;
    height: 400px;
}
span.button-hover-nav {
 display: block;
 clear: both;  
  width: 200px;    
    margin-bottom: 20px;
}
.left {
      width: 200px;
      float: left;
}
.block-5 {
     display: none;
    width: 200px;
    float: right;
}
.block-5 a {
     color: blue;
}
.block-6 {
     display: none;
    width: 200px;
    float: right;
}
.block-6 a {
     color: green;
}

​
<div class="body">
 <span class="button-hover-nav" id="b-hover-nav">Hover Me</span>
</div>

<div class="block-5">
<h1>Please stay open unless I leave...</h1>
<a link="#">Click Me</a>
</div>

//Totally does not work:
// Bind the mouse over /out to the first DIV.
            $('#b-hover-nav').live('mouseenter', function() {
        $('.block-5').show();
    }).live('mouseleave', function() {
        t = setTimeOut(function() {
            $('.block-5').hide();
        }, 100);
    });

    $('.block-5').live('mouseenter', function() {
        if(t) {
            clearTimeout(t);
            t=null;
        }
    });
4

1 回答 1

1

您遇到的问题是由于在按钮上的 mouseout 事件触发之前用户没有时间将鼠标移到对象上。你需要给他们一点时间用鼠标到达那里。

另外，我更喜欢 jQuery 的内置悬停方法。但是如果你愿意，你可以使用绑定。

JSFiddle

var timer1,timer2;
var delay=1000;
$("#b-hover-nav").hover(function() {
    clearTimeout(timer1);
    $('.block-6').hide();
    $('.block-5').show();
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, delay);
});

$("#c-hover-nav").hover(function() {
    clearTimeout(timer2);
    $('.block-5').hide();
    $('.block-6').show();
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-6").hover(function() {
    clearTimeout(timer2);
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-5").hover(function() {
    clearTimeout(timer1);
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, 2000);
});

​</p>

于 2012-09-27T21:50:49.663 回答