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

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

这是 JS 小提琴:http://jsfiddle.net/derekbrown/2qVK2/21/

提前致谢!

【问题讨论】:

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

标签: jquery html css animation internet-explorer-7


【解决方案1】:

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

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

http://jsfiddle.net/2qVK2/19/

编辑:这样更好,设置宽度,动画更流畅。

http://jsfiddle.net/2qVK2/20/

【讨论】:

  • 我更喜欢这个动画,但它在 IE7 中仍然无法正常工作。我相信它与折叠的图像有关。我已更新 JSFiddle 以在此处包含完整代码:http://jsfiddle.net/derekbrown/2qVK2/21/
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多