Question

我正在使用以下内容通过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 () {



    });


}

谢谢，汤姆

Answer 1

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

要避免这种情况，只需在jQuery('#tooltipwindow').empty()处理程序中添加以下内容：

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

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

.activityIndicator

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

Answer 2

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

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")    
});

此外，如果您想创建悬停效果，您可能希望监听鼠标悬停事件，而不是您使用mousemove()方法所知道的mousemove事件。

Answer 3

你只想影响第一个div吗？如果是这样，为什么不使jQuery选择器更具体，以便它只适用于第一个元素：

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

Answer 4

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
});

jQuery mouseover hover mouseout删除设置变量

4 个答案: