Question

我正在将此代码用于工具提示，这是我编写的一个简单函数，用于在网页上显示更好的标题标签;

function tooltip(target_items, name){

 $(target_items).each(function(i){

$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

$(this).removeAttr("title").mouseover(function(){
        my_tooltip.css({display:"none"}).stop(true, true).slideDown(225);
}).mousemove(function(kmouse){
        my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
        my_tooltip.css({display:"none"});                 
});
 });

 }

我希望它能让整个事物只有在鼠标停留一段时间后才会触发，比如1000.如果鼠标离开触发区域之前我想要它，那么事件永远不会发生

Answer 1

可能你需要设置超时并在1秒未完成时清除它：

function tooltip(target_items, name) {

$(target_items).each(function (i) {

    $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "</p></div>");
    var my_tooltip = $("#" + name + i);
    var myTooltipTimer;
    var delay = 1000;

    $(this).removeAttr("title").mouseover(function () {
        myTooltipTimeout = window.setTimeout(function () {
            my_tooltip.css({ display: "none" }).stop(true, true).slideDown(225);
            myTooltipTimeout = null;
        }, delay);
    }).mousemove(function (kmouse) {
        my_tooltip.css({ left: kmouse.pageX + 15, top: kmouse.pageY + 15 });
    }).mouseout(function () {
        if (myTooltipTimer != null)
            window.clearTimeout(myTooltipTimer);
        else {
            my_tooltip.css({ display: "none" });
        }
    });
});

也许使用jQuery存在更清晰的解决方案

Answer 2

查看jQuery HoverIntent插件：http://cherne.net/brian/resources/jquery.hoverIntent.html

由于您正在自己实施工具提示，请查看http://craigsworks.com/projects/qtip2/ - 它可能是您需要的，而无需大量自定义代码。

如果鼠标没有聚焦超过一定时间，可以防止悬停事件发生？

2 个答案: