Question

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

基本上我的工具提示在所有浏览器中运行完美，只有一个例外;苹果浏览器。我的问题是，当我浏览任何图像时，浏览器开始闪烁白色，我没有找到任何解决方案，但看起来我的问题是工具提示脚本。

我有一个例子：

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那样。

你最好将你的功能分成＆＃34; mouseenter＆＃34;和＆＃34; mouseleave＆＃34;。此外，这种使用回调的方式已经过时了。新方法（非常方便）是使用$('#id').on("mouseenter", function(){});

您的mousemove触发器也应谨慎使用。将布尔值与mouseenter结合并保留函数可能是明智的。

步骤中的想法：
首先创建var entered = false;
1：鼠标进入区域
2：做你想做的事，然后说"entered = true;"
3：既然您已经完成了这项工作，请使用if(!entered){//do your thing}包围您的onhover功能（或鼠标中心，或鼠标移动，或任何会发生某些事情的功能） 4：现在你必须计算这个人是否还在你的抵消范围内。如果不是：entered = false;

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

JQuery工具提示与眨眼野生动物园

1 个答案: