IE7 Background Ghost When Element is Hid

There seems to be little documented on this issue. I will share it here if anyone ever come across this issue. Keep in mind that I am using jQuery, not sure if it makes any difference. Also I didn't try to reproduce in a standalone example because I don't have enough time; but you would not be reading this if you don't have a similar problem anyway.

Description:

<div id="parent">
   <div id="child"></div>
   <div id="child2"></div>
</div>

#child has a background image. #parent is then hidden by

$('#parent').hide()

and then #child is hidden by

$('#child').hide()

When you open #parent again, you still see the background image of #child even though it's already hidden with style="display: none;". When you mouse over it, the background image would disappear.

Solution:

Hide elements in order of inner element to outer element. i.e.,

$('#child').hide()

then

$('#parent').hide()

I spent almost 2 hours debugging this. Hope this post can save you some times.