【发布时间】：2014-12-02 11:47:16
【问题描述】：
我想通过调用一个名为showKeyTip 的新函数来清理我的工具提示插件的mouseenter 部分。 （这也可以让我在 mouseenter 中使用 if 语句来控制悬停）
我从 mouseleave 中如何处理 setTimeout 得到了这个想法，但由于某种原因，类似的调用在 mouseenter 中不起作用...
我觉得我错过了什么，或者不完全理解 $(this) 是如何与事物联系在一起的。
感谢任何意见/建议。
当前代码（sn-p）：
// [ hide ]
function hideKeyTip(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
// [ control ]
return this.each(function(){
$(this)
.on("mouseenter", function(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css & show
keyTip.css({
'top': top,
'left': left
}).show();
})// mouseenter
.on("mouseleave", function(){
hideKeyTip();
});// mouseleave
});// return this
清理版（不工作）
我将 mouseenter 的内容移动到一个名为 showKeyTip 的新函数中，并在 mouseenter 中调用它。
// [ hide ]
function hideKeyTip(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.each(function(){
$(this)
.on("mouseenter", function(){
showKeyTip();
})// mouseenter
.on("mouseleave", function(){
hideKeyTip();
});// mouseleave
});// return this
更新：清理第 2 版（工作）
使用 adeneo 的 建议，这个谜题还有最后一块……
在测试用例中滚动以悬停或 mouseenter/over 工具提示的最佳方式是什么？
如果鼠标悬停在上面，我想继续显示工具提示。
我目前的立场是在 hideKeyTip 函数中添加一个 if 语句，但工具提示会在显示时挂起，并且不会在鼠标离开时淡出。
// [ hide ]
function hideKeyTip(){
if(!keyTip.hover()){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.on({
mouseenter: showKeyTip,
mouseleave: hideKeyTip
});// return this
更新：悬停控制（帮助！）
当用户将鼠标悬停在实际工具提示上时，尝试重用隐藏和显示功能来显示工具提示。 （当工具提示中存在链接时很有用。）
有什么建议吗？我究竟做错了什么？谢谢...
// [ hide ]
function hideKeyTip(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.on({
mouseenter: showKeyTip,
mouseleave: hideKeyTip
});
return keyTip.on({
// note: keyTip = $(settings.tooltip);
mouseenter: function(){
clearTimout(timer);
},
mouseleave: hideKeyTip
});
最终更新：悬停控制（已解决）
在对 codepen 进行了一些试验和错误之后，我想我找到了一个很好的解决方案，可以在用户鼠标光标悬停时显示工具提示。我也是从错误的角度来处理这个问题...... return keyTip.on() 语句甚至合法吗？
所以这就是我想出的。如果您可以指出此方法的任何负面影响，请告诉我。
当我清理完代码笔后，我会将它发布在下面的评论中。
感谢 adeneo 为我指明了正确的方向。
// [ hide ]
function hideKeyTip(){
// note: keyTip = $(settings.tooltip);
keyTip.on({
mouseenter: function(){
//you have arrived
},
mouseleave: function(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
};
});
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.on({
mouseenter: showKeyTip,
mouseleave: hideKeyTip
});
【问题讨论】：
标签： javascript jquery function tooltip mouseenter