IE7 中的 jQuery 悬停问题

【问题标题】：jQuery Hover Problems in IE7IE7 中的 jQuery 悬停问题
【发布时间】：2012-02-16 22:27:50
【问题描述】：

我有一张图片，当将鼠标悬停在上面时，应该会显示另一张带有 4 个绝对定位链接的图片。此代码适用于 Chrome、Firefox、Safari 和除 IE7 之外的所有 IE 版本。对 IE 7 有帮助吗？

提前致谢！

【问题讨论】：

添加位置：相对于.info-box，我没有看到一个id为hot-buy-collapse的元素，所以当我在IE7中测试时，出现了该图像的空间还被带走吗？
抱歉：hot-buy-collapse 是展开左侧的图像，在展开时会折叠。此外，#hot-buy-rollover 已经有 position:relative 了。

【解决方案1】：

这里的问题是，尽管将不透明度设置为 0，但初始图像仍然占用页面空间。这可以通过编辑将图像设置为不透明度 0 到 1 的行来查看；悬停时，两张图片将并排显示。

您需要在悬停时以某种方式从文档流中删除初始图像。这通常通过将 display 属性设置为 none 来完成。我已经更新了 jsfiddle 来展示这个，但是动画非常流畅。我会编辑我的答案，我可以改进它的实现

编辑：这样更好，设置宽度，动画更流畅。

【讨论】：

我更喜欢这个动画，但它在 IE7 中仍然无法正常工作。我相信它与折叠的图像有关。我已更新 JSFiddle 以在此处包含完整代码：http://jsfiddle.net/derekbrown/2qVK2/21/