jQueryhover在IE10中不起作用，但适用于较低的IE版本

在我的网站上，这些框应该淡入描述中。 这适用于我尝试过的每个浏览器，除了IE10。 这是一个WordPress网站，我使用九个插件。 我已经尝试停用所有插件但徘徊仍然无法在IE10中运行。

下面是我用于hover的代码：

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); }); }); 

有人可以帮我识别问题吗？ 如果我遗漏了任何重要信息，请告诉我。 谢谢。

编辑：过滤/hover的整个代码。

  // 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(); }); }); 

Answer 1

这里的问题是浏览器嗅探代码; 将Internet Explorer 10的用户代理字符串*更改为Chrome的用户代理字符串*，然后刷新浏览器。 你会发现它运作得很好。

脚本正在利用$.browser.msie并假设Internet Explorer 10就像Internet Explorer 7,8和9（它不是，它完全不同）。 你的情况的罪魁祸首来自jQuery QuickSand。 看看以下情况：

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

此测试仅检查版本号的第一个值，将错误地将Internet Explorer 10识别为版本“1”，显然小于7，即支持的版本。

六个月前修复了这个问题; 从GitHub 下载最新版本的QuickSand。

更改Internet Explorer的用户代理字符串

按F12显示开发人员工具。 选择工具>更改用户代理字符串以显示其他ua-string选项。 选择“Chrome”，然后刷新浏览器以“Chrome”重新发出HTTP请求。

Answer 2

通过将此插入到当前调用.hover上方的行上，可以查看代码运行时IE 10是否存在.thumbnail对象：

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

如果这记录为0那么这将解释为什么hover事件处理程序永远不会挂钩。 无论出于何种原因，IE 10认为这些元素在代码运行时尚不存在。 这是绑定可能更好的事件的另一种方法：

 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); }); }); 

这样做是为了设置一对全局事件处理程序，它们只适用于具有“thumbnail”类名的元素，无论这些代码首次运行时是否存在这些元素。 如果问题是IE 10中的时间问题，这可能会解决它。