jQuery悬停在IE10中不起作用，但在较低的IE版本中起作用 [英] jQuery hovers don't work in IE10 but works in lower IE versions
问题描述
在我的网站上，框应该淡入了说明中.除了IE10，这在我尝试过的所有浏览器中都有效.这是一个WordPress网站，我使用9个插件.我曾尝试停用所有插件，但是悬停组件在IE10中仍然无法正常工作.
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.
过滤/悬停的完整代码.
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();
});
});
推荐答案
问题在于浏览器嗅探代码；将Internet Explorer 10的用户代理字符串*更改为Chrome，然后刷新浏览器.您会发现它工作正常.
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.
脚本正在利用$.browser.msie，并假定Internet Explorer 10与Internet Explorer 7、8和9相似(不是，这是根本不同的).造成这种情况的罪魁祸首来自jQuery QuickSand.看看以下情况:
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;
}
此测试仅检查版本号的第一个值将错误地将Internet Explorer 10标识为版本"1"，该版本明显小于受支持的版本7.
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.
此问题已得到固定六个月前；从GitHub 下载QuickSand的最新版本.
This was fixed six months ago; download the latest version of QuickSand from GitHub.
按F12键显示开发人员工具.选择工具">更改用户代理字符串" 以显示其他ua-string选项.选择"Chrome"，然后刷新浏览器以将HTTP请求重新发出为"Chrome".
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".
这篇关于jQuery悬停在IE10中不起作用，但在较低的IE版本中起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
