jQuery 悬停和 IE

Posted

技术标签:

【中文标题】jQuery 悬停和 IE【英文标题】:jQuery Hover and IE 【发布时间】:2011-06-07 19:00:58 【问题描述】:

我因为可能是一分钟的事情而失去了我的发际线。如果你比较this website 在带有 IE 的 Chrome/Firefox 中,您会注意到,如果您将鼠标悬停在每个条目上,在 Chrome/FF 中它会得到浅绿色背景,而在 IE 中,zilch/nada/zero/zippo...

编码兄弟会中的任何人都可以提供一些指示吗?不可否认,jQuery 不是我的强项,这是驱动悬停效果的代码:

$('div.availableNowListing').hover( function() 
    $(this).addClass('focus');
, function() 
    $(this).removeClass('focus');
);

和 CSS:

div.availableNowListingCatHeading 
    display: none;
    border: 1px solid #e6e6e6;
    margin-top: 20px;
    overflow: hidden;
    background-color: #efefef;

div.availableNowListingCatHeading h3 
    float: left;
    margin-left: 80px;
    margin-top: 20px;

div.availableNowListingCatHeading img 
    margin: 5px;
    float: left;
    border: 1px solid #e3e3e3;

.focus 
    background-color: #dbfcab;

提前感谢您查看此内容:)

【问题讨论】:

我没有看到任何错误,但您能否从您的页面中取出 console.log 以防万一? 您的页面上似乎包含了两次 jQuery。会不会跟这有关系? @Heikki - 我已经完成了 console.log 并且它很好地注册了悬停效果,只是不显示绿色背景。咕噜。 @Karim - 双重包容也让我发疯,最终放弃了我的双手投降。这是一个基于 WP 的站点,其中一个包含来自插件,另一个是手动放置。我进行手动放置的原因是,如果没有它,我放在页脚中的 jquery(稍后我将链接到外部 js 文件)根本不会运行,尽管插件调用 jquery.另外,我已将上面复制的 jquery 代码设置为在无冲突模式下工作 - 但我不确定如果调用两个 jquery 库它会做什么:) 【参考方案1】:

我猜这是因为 div.availableNowListing 没有得到任何高度,因为您将元素浮动在 div.availableNowListing 中。

div.availableNowListing上设置css属性overflow: hidden并试一试。

..弗雷德里克

【讨论】:

嗨 Fredrik,感谢大家的回答 - 结合 Gaby 的回答,我能够修复显示。它最终成为 CSS / jQuery 错误的组合 :) @Gaby:不用说,同样/类似的问题不止一次 :)【参考方案2】:

问题出在

header = $(this).find('div.availableNowListingCatHeading');

行。

您有一个 id 为 header 的 div,这让 IE 感到困惑(它将变量视为元素的快捷方式。) 这会导致 IE 尝试将某些内容分配给 en 元素,该元素失败并在那里停止您的脚本。 (focus 类永远不会被分配

只需在开头添加var如果你想用它做点什么,或者如果它是剩余的则完全删除该行)..

var header = $(this).find('div.availableNowListingCatHeading');

【讨论】:

我得出了同样的结论(虽然我不明白为什么添加 var 会修复它),除了我还必须注释掉 console.log() 调用以使其在 IE 中工作。 @thirtydot - 是的,你需要让开发者工具在 IE 中运行以允许 console.log @thirtydot - 添加var 使其成为一个新的局部范围变量,而不是使用同名的全局变量。 盖比 - 非常感谢!这是脚本中的主要错误 - 删除该行后,一切正常。在此之后,Fredrik 提到的 CSS 错误也解决了显示问题。您的解决方案最终正确应用了 .focus 类,并且 Fredrik 的解决方案由于内部浮动元素修复了 .focus 的正确实现:) - 感谢负载! @inrbob,还加载了firebug lite 修复了console.log() 问题。

以上是关于jQuery 悬停和 IE的主要内容,如果未能解决你的问题,请参考以下文章

JQuery/Javascript:IE 悬停不包括选择框选项?

jQuery 图像/悬停预览导致 IE7 中出现断断续续的行为

jQuery .css background-position-x 在悬停时更改在 IE 中不起作用

jQuery div 悬停功能在 Firefox 中不起作用

使用 jQuery 悬停

JQuery - 图像的悬停事件在另一个图像后面