Styling background images with jquery

JavaScript
1

Hi,

I wonder if anyone can help. Is it possible to have a background image change on hover using jquery and also have a fade in effect?
I have been able to do this with images, but now when they are background images on a div.

2

You would need to do the following in order to achieve this:

  1. You would need to fade out the element your changing the background image on and once faded out change the background image URL to the new image
  2. Once the URL has been changed simply fade the element back in then rense and repeat for any other images you have

NOTE: To avoid the element collapsing to height: 0 you should wrap a DIV around the child element with a set height and width so that you can change the background on the child element.

3

Thanks for the quick reply. I have managed to get it working. Your explanation helped me see the problem from a different angle. I took the approach you suggested, but as the original and ‘hover’ images were the same but for their transparency I was able to simplify it even further. Thanks again, I have been staring at this problem for days and was getting nowhere :slight_smile: