javascript - 如何在悬停时指定图像的位置

Question

我有一些代码可以直接在任何超链接上显示图像。不幸的是，如果图像直接填充在光标上方，则似乎存在冲突:

Website

您可以看到该代码适用于小图像。但是大图像会闪烁。我怎样才能让图像停止闪烁。我认为显示图像的位置需要远离超链接。

jQuery(document).ready(function() {

    jQuery("<div id='player-image-hover'></div>").appendTo("body").css("position", "absolute").css("z-index", "1000").css("padding", "2px").css("backgroundColor", "#666");

    jQuery("a[href^='http://thepoolscene.com/player-profile']").each(function() {
        var title = jQuery(this).attr("title");
        title = title.toLowerCase();
        title = ucwords(title);
        var url = "http://" + window.location.host + "/wp-content/gallery/playerphotos/" + escape(title) + ".jpg";
        // var o = jQuery(this).offset();
        var that = this;
        jQuery.ajax({
            url: url,
            type: 'HEAD',
            error: function() { 
                console.log('doesnt exist: ' + url);
            },
            success: function() {
                //var image_preload = new Image(100,25); 
                //image_preload.src = url;
                if (jQuery("#player-image-hover").find("img[src='" + url + "']").length == 0) {
                    jQuery("#player-image-hover").append("<img src='" + url + "' height='220' style='display:none'>");
                }
                jQuery(that).hover(
                    function() {
                      var o = jQuery(this).offset();
                      jQuery("#player-image-hover").css("left", o.left).css("top", o.top-222).css("display", "block").find("img[src='" + url + "']").css("display", "block");
                    },
                    function() {
                      jQuery("#player-image-hover").css("display", "none").find("img").css("display", "none");
                    }
                );
            }
        });
    });

});

function ucwords (str) {
  // http://kevin.vanzonneveld.net
  // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // +   improved by: Waldo Malqui Silva
  // +   bugfixed by: Onno Marsman
  // +   improved by: Robin
  // +      input by: James (http://www.james-bell.co.uk/)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // *     example 1: ucwords('kevin van  zonneveld');
  // *     returns 1: 'Kevin Van  Zonneveld'
  // *     example 2: ucwords('HELLO WORLD');
  // *     returns 2: 'HELLO WORLD'
  return (str + '').replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g, function ($1) {
    return $1.toUpperCase();
  });
}

Answer 1

我认为发生这种情况是因为当您将鼠标悬停在覆盖有图像的链接上时，onmouseout 事件会在链接上触发并隐藏图像。然后再次触发onmouseover，继续循环。

以下插件可能有助于解决问题。 http://cherne.net/brian/resources/jquery.hoverIntent.html

这可以在触发 handlerOut 之前添加一个超时。此外，如果您决定添加两种类型的悬停，它还支持事件委托(delegate)。