jQuery 悬停设置左侧位置在 IE 中不起作用？答案

【问题标题】：jQuery hover to set position left doesn't work in IE?jQuery 悬停设置左侧位置在 IE 中不起作用？
【发布时间】：2013-05-07 15:21:19
【问题描述】：

我在使以下代码在任何版本的 IE 中都能正常工作时遇到问题。应该显示的 div 根本不会出现在悬停上...

$('.trigger').hover(function() {
    $(this).css({'height':'390px','width':'475px'});
    $(this).find('.preview_window').css('left', '0px');
},
function(){
    $(this).css({'height':'29px','width':'29px'});
    $(this).find('.preview_window').css('left', '-9999px');
}
);

它必须是一些非常愚蠢的东西......看看它是如何在除 IE 之外的所有东西上工作的。有人能解释一下吗？

【问题讨论】：

为什么不直接在 CSS 中完成所有这些工作？因为您所做的只是更改 CSS 信息
我在 CSS 中设置时遇到了一些闪烁的问题。（再次，仅在 IE 中）比我现在的问题更奇怪。

标签： jquery css internet-explorer jquery-hover

【解决方案1】：

我认为您必须将 position 属性添加到该 div ：

preview_window {
    position: relative;
}

【讨论】：

也许你可以试试 jquery 函数 hide() 和 show() 而不是玩位置...
由于 IE 中的显示错误，我实际上将其从隐藏/显示更改为。我在显示的 div 中有一个谷歌地图，因为它在页面加载时被隐藏，所以一旦显示并且图钉未居中，它就不会正确调整地图的大小。（它在左上角，因为它认为它的大小是 0x0）在旧版 IE 中，地图根本不显示。

【解决方案2】：

您可能需要像这样专门定义位置方法：

$('.trigger').hover(function() {
    $(this).css({'height':'390px','width':'475px'});
    $(this).find('.preview_window').css({'position':'absolute','left':'0px'});
},
function(){
    $(this).css({'height':'29px','width':'29px'});
    $(this).find('.preview_window').css({'position':'absolute','left':'-9999px'});
});

【讨论】：

样式是在 CSS 中设置的。

【解决方案3】：

原来 IE 只是不喜欢我在函数中放置换行符的位置...

这是 IE 显然可以更好理解的更改代码。

$('.trigger').hover(function() {
    $(this).css({'height':'390px','width':'475px'});
    $(this).find('.preview_window').css('left', '0px');
},function(){ //This was also on two lines before
    $(this).css({'height':'29px','width':'29px'});
    $(this).find('.preview_window').css('left', '-9999px');
}); // This was on two lines before

我知道这很愚蠢。现在一切正常。 =/

【讨论】：