jQuery 悬停和 IE答案

【问题标题】：jQuery Hover and IEjQuery 悬停和 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 库它会做什么:)

标签： jquery internet-explorer google-chrome hover

【解决方案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() 问题。