Why doesn't hover work? [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 8 years ago.

Improve this question

I can't figure out why this isn't showing images upon hovering text. Can anyone give me any ideas as to where I went wrong? I know the images are on the right path because they download upon click. I can't seem to find anything online besides the generic typo mistakes but I have looked over this several times and ran it through linter but can't find anything.

Anything helps. Thanks in advance.

$(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

Make sure that your selector is working properly. I can't tell for sure without seeing your HTML, but the way that the jQuery selector selector[x=?] selector works is by finding all elements that match selector with attribute x="?".

For instance, the selector img[height=100] will select all images whose height attribute is set to 100.

---

Now in your case, you have the selector img[data-hover], which will select all images with a data-hover attribute set, e.g.

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

It doesn't matter what it is set to, since you didn't specify that, but it does have to have that attribute in order for it to work. If you are just trying to bind the hover event to the images, you can do that with just the .hover() method.

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

---

JSFiddle

In this JSFiddle example, you can see what was mentioned above. Since both images have their height attribute set, they both lose opacity onHover, but since the bottom one is the only one whose height is set to 200, it is the only one that is inverted onHover.