当您将鼠标放在聊天列表中的名称上时,我正在尝试在 Gmail 的 GridView 中创建一个悬停菜单。
如何在 1-2 秒后显示 Jquery 中的元素仅当鼠标仍在元素上?
以下内容无法正常工作,因为如果我只是在整个列表中移动鼠标,所有元素都会显示(即使有 1 秒的延迟)
$('.label, .popup').hover(function(e) {
setTimeout(function() {
$(e.target).closest("tr").find(".popup").show();
}, 1000);
}, function(e) {
setTimeout(function() {
$(e.target).closest("tr").find(".popup").hide();
}, 1000);
});
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="label1" CssClass="label" runat="server" Text='<%# Eval("Column1") %>'></asp:Label>
<asp:Panel runat="server" ID="popup" CssClass="popup"
Style="display: none; position: absolute; margin-left: 60px; width: 250px;">
Random text
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
最佳答案
清除 mouseout 函数中的 setTimeout,这样如果自从鼠标悬停在元素上未显示 1 秒后仍未过去。
$('.label, .popup').hover(function(e) {
$(this).data('timeout', setTimeout(function() {
$(e.target).closest("tr").find(".popup").show();
}, 1000));
}, function(e) {
clearTimeout($(this).data('timeout'));
setTimeout(function() {
$(e.target).closest("tr").find(".popup").hide();
}, 1000);
});
关于c# - 仅当鼠标仍在元素上时,如何在 1 秒后在 Jquery 中显示元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12326600/