带闪烁 safari 的 JQuery 工具提示

Question

在花了几个小时审查我的代码和检查一些插件之后，我在制作工具提示时做着噩梦，我决定在我发疯之前寻求一些帮助。

基本上我的工具提示在所有浏览器中都能完美运行，只有一个异常(exception)；苹果浏览器。我的问题是当我传递任何图像时，浏览器开始闪烁白色，我还没有找到任何解决方案，但看起来我的问题是工具提示脚本。

我有一个例子:

JS

this.imagePreview = function()
{   
    var xOffset = 10;
    var yOffset = 30;

    $('#Images a').hover(function(e)
    {
        var tooltipName = $(this).attr('rel');

        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";

        $("body").append("<p id='tooltip' class='imageToolTip'><img src='" + BASE + "/img/template/Images/tooltip" + tooltipName + ".png' />"+ c +"</p>");  

        $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#tooltip").remove();
    });

    $('#Images a').mousemove(function(e)
    {
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });

};

CSS

.imageToolTip {position: absolute; z-index: 9999; margin-left: -120px; margin-top: 27px;}

非常感谢您的帮助。

Answer 1

这可能是因为您在悬停时使用。悬停是一个持续的回调，它会在您移动的每个像素时触发，就像 resizewindow 一样。

最好将您的功能拆分为“mouseenter”和“mouseleave”。此外，这种使用回调的方式已经过时了。新方法(非常方便)是使用 $('#id').on("mouseenter", function(){});

您的 mousemove 触发器也应谨慎使用。将 bool 值与 mouseenter 和 leave 函数结合起来可能很聪明。

对于步骤的想法:
首先创建var entered = false;
1:鼠标进入区域
2:想做什么就做什么，然后说"entered = true;"
3:现在你已经完成了这个，用if(!entered){//do your thing}包围你的悬停功能(或鼠标输入，或鼠标移动，或任何会发生某些事情的功能)。
4:现在你必须计算这个人是否仍在你的补偿范围内。如果不是:entered = false;

因为他们离开了这个区域，所以我们把效果放在了if(!entered)中语句可以再次触发，但这次只能触发一次。