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 中不起作用