jQuery Hover Problems in IE7

Question

I have an image that, when hovered over, should display another image with 4 absolutely positioned links. This code works in Chrome, Firefox, Safari, and all versions of IE except IE7. Any help with IE 7?

Here's the JS Fiddle: http://jsfiddle.net/derekbrown/2qVK2/21/

Thanks in advance!

Answer 1

The problem here is that the initial image is still taking up space on the page despite setting opacity to 0. This can be seen by editing the line which sets the image to opacity 0 to 1; when hovered both images will be shown side by side.

You need to somehow remove the initial image from the document flow on hover. This is normally done by setting the display property to none. I've updated the jsfiddle to show this in action but the animation is totally smooth. Ill edit my answer I can improve on its implementation

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

EDIT: This is better, sets the width, animation is much smoother.

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