jQuery mouseover hover mouseout移除集合变量

jQuery mouseover hover mouseout remove set variables

本文关键字：集合 变量 mouseout mouseover hover jQuery      更新时间：2023-09-26

我使用以下内容通过悬停在区域地图上的jquery从另一个页面引入图片和一些文本。当你悬停时，我已经找到了它，但当你悬停在一个新元素上时，它会加载最后一个元素，然后快速切换到新元素。如何清除它在鼠标上保存的内容？我添加了mouseout功能，但我不知道该在里面放什么！任何帮助都将不胜感激。

if (sPage == "fireplan.aspx") {
    jQuery('area').mousemove(function (e) {
        var url = jQuery(this).attr('tooltiphref');
        jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url);
        jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")
    });
    jQuery('area').mouseout(function () {

    });

}

谢谢，Tom

"闪烁"的原因是，旧内容在移动时仍在工具提示窗口中，因为与通过下一行的.css()移动工具提示相比，对.load()的调用需要一些时间。

为了避免这种情况，只需在mouseout处理程序中放入以下内容：

jQuery('#tooltipwindow').empty()

这将删除以前加载到工具提示中的内容，因此其内容将显示为空白。更理想的方法是插入某种活动指示器，让用户知道内容正在加载，例如：

jQuery('#tooltipwindow').html('<div class="activityIndicator"></div>')

在这种情况下，您只需将类.activityIndicator设置为具有一些背景图像，如旋转车轮的动画GIF。

显示加载成功回调中的工具提示，这样您就可以在显示工具提示之前知道新内容已经加载。

jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url, function() {
    jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")    
});

此外，如果要创建悬停效果，可能需要侦听mouseover事件，而不是使用mousemove()方法已知的mousemove事件。

是否只想影响第一个div？如果是这样的话，为什么不让jQuery选择器更加具体，这样它只适用于第一个元素：

$('area.first_area').mousemove(function(){ });

jQuery('area').mousemove(function (e) {
    var url = jQuery(this).attr('tooltiphref');
    jQuery('#tooltipwindow').empty(); // empty before loading new content
    jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url);
    jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + "px").css("display", "none").fadeIn("fast")
});

jQuery('area').mouseout(function () {
    jQuery('#tooltipwindow').empty();  // empty when mouseout get triggered
});
相关文章：