Question

我无法弄清楚为什么在悬停文字时没有显示图像。谁能给我任何关于我哪里出错的想法？我知道图像在正确的路径上，因为它们在点击时下载。除了普通的拼写错误之外，我似乎无法在网上找到任何东西，但我已经多次查看并通过linter运行但却找不到任何东西。

一切都有帮助。提前谢谢。

$(function () {
$('img[data-hover]').hover(function () {
    $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-   hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
}).each(function () {
    $('<img />').attr('src', $(this).attr('data-hover'));
});
});

$(document).ready(function () {
$('a.tip').imgPreview({
    containerID: 'imgPreviewWithStyles',
    /* Change srcAttr to rel: */
    srcAttr: 'rel'
});
});

(function ($) {
$.expr[':'].linkingToImage = function (elem, index, match) {
    // This will return true if the specified attribute contains a valid link to an image:
    return !!($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i));
};

$.fn.imgPreview = function (userDefinedSettings) {

    var s = $.extend({

        /* DEFAULTS */

        // CSS to be applied to image:
        imgCSS: {},
        // Distance between cursor and preview:
        distanceFromCursor: { top: 10, left: 10 },
        // Boolean, whether or not to preload images:
        preloadImages: true,
        // Callback: run when link is hovered: container is shown:
        onShow: function () { },
        // Callback: container is hidden:
        onHide: function () { },
        // Callback: Run when image within container has loaded:
        onLoad: function () { $(this).delay(5000).fadeOut(500); },
        // ID to give to container (for CSS styling):
        containerID: 'imgPreviewContainer',
        // Class to be given to container while image is loading:
        containerLoadingClass: 'loading',
        // Prefix (if using thumbnails), e.g. 'thumb_'
        thumbPrefix: '',
        // Where to retrieve the image from:
        srcAttr: 'rel'

    }, userDefinedSettings),

    $container = $('<div/>').attr('id', s.containerID)
                    .append('<img/>').hide()
                    .css('position', 'absolute')
                    .appendTo('body'),

    $img = $('img', $container).css(s.imgCSS),

    // Get all valid elements (linking to images / ATTR with image link):
    $collection = this.filter(':linkingToImage(' + s.srcAttr + ')');

    // Re-usable means to add prefix (from setting):
    function addPrefix(src) {
        if (src !== null) {
            return src.replace(/(\/?)([^\/]+)$/, '$1' + s.thumbPrefix + '$2');
        }
    }
    if (s.preloadImages) {
        (function (i) {
            var tempIMG = new Image(),
                callee = arguments.callee;
            tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr));
            tempIMG.onload = function () {
                $collection[i + 1] && callee(i + 1);
            };
        })(0);
    }

    $collection
        .mousemove(function (e) {

            $container.css({
                top: e.pageY + s.distanceFromCursor.top + 'px',
                left: e.pageX + s.distanceFromCursor.left + 'px'
            });
        })
        .hover(function () {

            var link = this;
            $container
                .addClass(s.containerLoadingClass)
                .show();
            $img
                .load(function () {
                    $container.removeClass(s.containerLoadingClass);
                    $img.show();
                    s.onLoad.call($img[0], link);
                })
                .attr('src', addPrefix($(link).attr(s.srcAttr)));
            s.onShow.call($container[0], link);

        }, function () {
            $container.hide();
            $img.unbind('load').attr('src', '').hide();
            s.onHide.call($container[0], this);
        });

    // Return full selection, not $collection!
    return this;
};

})(jQuery);

Answer 1

确保您的选择器正常工作。如果没有看到您的HTML，我无法确定，但jQuery选择器selector[x=?]选择器的工作方式是找到所有与selector匹配的属性x="?"的元素。

例如，选择器img[height=100]将选择高度属性设置为100的所有图像。

现在，在您的情况下，您有选择器img[data-hover]，它将选择具有数据悬停属性集的所有图像，例如

<img src="..." data-hover=""/>

它设置的内容并不重要，因为你没有指定它，但它必须具有该属性才能使它工作。如果您只是尝试将悬停事件绑定到图像，则可以仅使用.hover()方法执行此操作。

$("img").hover(function(){});

JSFiddle

在这个JSFiddle示例中，您可以看到上面提到的内容。由于两个图像都设置了高度属性，因此它们都会在onHover上失去不透明度，但由于底部图像是唯一一个高度设置为200的图像，因此它是唯一一个在onHover上反转的图像。

为什么不悬停工作？

1 个答案:

JSFiddle