jQuery hovers don't work in IE10 but works in lower IE versions

Question

On my site, the boxes are supposed to fade into the description. This works in every browser I've tried except IE10. This is a WordPress site and I use nine plugins. I've tried deactivating all plugins but the hovers still don't work in IE10.

Below is the code I'm using for the hovers:

jQuery(document).ready(function($){

$('.thumbnail').hover(function() {
  $('img', this).stop(true,true).fadeTo(100, 0.1);
  $('.description', this).stop(true,true).fadeIn(100);
}, function() {
  $('img', this).stop(true,true).fadeTo(100, 1);
  $('.description', this).stop(true,true).fadeOut(100);
});

});

Can someone help me identify the problem? If I left out any important info, please let me know. Thank you.

Edit: The entire code for the filtering/hovers.

  // Filter
  $(function() {

    var time_effect = 1000;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });

            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });

    $('.btn_all').click(function(e) {
      $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_identity').click(function(e) {
      $('.all').quicksand( $('.identity article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_web').click(function(e) {
      $('.all').quicksand( $('.web article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_illustration').click(function(e) {
      $('.all').quicksand( $('.illustration article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_print').click(function(e) {
      $('.all').quicksand( $('.print article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });
  });

@roasted, no I haven't tried `mouseenter/mouseleave`. @musa No, they are not dynamically generated. — J82, Apr 14 '13 at 22:25
It looks like your event handlers aren't being bound, if you run the same code again from the console it works. — Musa, Apr 14 '13 at 22:45
@Musa is right - running the same code from the console fixes it, which must mean that when that code is first run, the `.thumbnail` objects are not yet present on the page. If you can't adjust when that code first runs, using `jQuery.on` with a selector will handle even elements that are not yet present on the page. — Joel Mueller, Apr 14 '13 at 22:50
@Musa What would I need to do to fix this? I have no clue how to move forward from here. — J82, Apr 14 '13 at 23:04
I don't know what is causing it or how to fix it, you'll have to do some serious debugging to track it down. — Musa, Apr 14 '13 at 23:07

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

The problem here is with browser-sniffing code; change Internet Explorer 10's user-agent string* to that of Chrome, and refresh the browser. You'll see that it works just fine.

Scripts are leveraging $.browser.msie and assuming that Internet Explorer 10 is like Internet Explorer 7, 8, and 9 (it's not, it's radically different). The culprit in your situation comes from jQuery QuickSand. Have a look at the following condition:

if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
    $sourceParent.html('').append($collection);
    return;
}

This test, checking only the first value of the version number will mistakenly identify Internet Explorer 10 as version "1", which is clearly less than 7, the supported version.

This was fixed six months ago; download the latest version of QuickSand from GitHub.

Changing Internet Explorer's User Agent String

Press F12 to reveal the Developer Tools. Select Tools > Change user agent string to reveal other ua-string options. Select "Chrome", and refresh the browser to re-issue the HTTP request as "Chrome".

score 1 · Answer 2 · answered Apr 14 '13 at 23:19

You can find out if the .thumbnail objects exist for IE 10 at the time the code is run by inserting this on the line above your current call to .hover:

console.log($('.thumbnail').length);

If this logs a 0 then that would explain why the hover event handlers are never hooked up. For whatever reason, IE 10 thinks those elements don't yet exist at the point where the code is run. Here's an alternative way of binding the events that may work better:

jQuery(document).ready(function($){

    $(document.body)
        .on('mouseenter', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 0.1);
            $('.description', this).stop(true,true).fadeIn(100);
        })
        .on('mouseleave', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 1);
            $('.description', this).stop(true,true).fadeOut(100);
        });

});

What this does is it sets up a pair of global event handlers that only apply to elements that have the "thumbnail" class name, regardless of whether or not those elements exist at the time this code is first run. If the problem is a matter of timing in IE 10, this may fix it.

I made this change but the hovers still aren't working in IE10. I updated my original post with the full code for the filtering/hovering if that helps any. — J82, Apr 14 '13 at 23:49

jQuery hovers don't work in IE10 but works in lower IE versions

2 Answers2

Changing Internet Explorer's User Agent String

Linked