$('.masterTooltip').hover(function() {
// hover over code.
var title = $(this).attr('data-submenu');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body');
var x = $(this).offset();
var w = $('#collapsed-menu').width();
$('.tooltip').css({ top: x.top + 'px', left: w + 'px' }).show();
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
});
我的目的是制作一个工具提示,当您将鼠标悬停在 <a>
上时,它会显示一个弹出框。 。这段代码工作得很好,但是因为我的 HTML 是动态加载的,所以无法使用悬停来工作。
$('#menuMain-ul').on('mouseenter', '.masterTooltip', function() {
});
该代码仅适用于我的动态 HTML,但是当我将这两个代码组合在一起时,它不起作用。谁能帮我使用mouseenter
让它发挥作用?
Normal Demo尝试将鼠标悬停在文本上
COMBINE DEMO注意到节目。
最佳答案
您的代码很接近。问题是,当使用委托(delegate)事件处理程序时,您一次只能分配一个事件处理程序,因此您需要为 mouseleave
事件再次调用 on()
。试试这个:
$('#menuMain-ul').on('mouseenter', '.masterTooltip', function() {
var $el = $(this);
var title = $el.data('submenu');
$el.data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').css({
top: $el.offset().top,
left: $('#collapsed-menu').width()
}).show();
}).on('mouseleave', '.masterTooltip', function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
});
另请注意,我稍微修改了逻辑以遵循最佳实践。
关于jquery - 将鼠标悬停更改为 on mouseenter 会破坏逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40545819/