Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
                        
                        5年前关闭。
                                                                                            
                
        
我不知道为什么在悬停文本时不显示图像。谁能给我有关我哪里出错的任何想法?我知道图片在正确的路径上,因为它们是在点击后下载的。除了一般的错字错误,我似乎无法在网上找到任何东西,但我已经浏览了好几次,并通过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);

最佳答案

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

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



现在您可以使用选择器img[data-hover],它将选择所有设置了数据悬停属性的图像,例如

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


设置为什么无关紧要,因为您没有指定它,但是它必须具有该属性才能起作用。如果您只是尝试将悬停事件绑定到图像,则可以仅使用.hover()方法来完成。

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




JSFiddle

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

关于jquery - 为什么悬停不起作用? ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22132443/

10-14 11:32
查看更多