Home/ Questions/Q 6738979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:25:59+00:00

I’m using Remy Sharp’s excellent tutorial to create a rollover menu using sprites, CSS

  • 0

I’m using Remy Sharp’s excellent tutorial to create a rollover menu using sprites, CSS and JQuery. The JQuery is solely used to ease the rollover with a fade effect and works perfectly with an opaque image sprite. However, I am having great difficulty in modifying the JQuery to work with my transparent PNG, as the original ‘off-state’ image still shows underneath.

I imagine the only way I can correct this is by fading out the bottom image as the top one fades on. Unfortunately any attempt I’ve made at this hides everything. Can anybody point me in the right direction?

Please see my jsFiddle for an example.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to make a different structure. For example:

    Is this what you wanted?

    I only quick-modified your code so it’s a bit ugly. Basically, I removed the background of the container element (‘a.home’) and added another span with the off-state image below it (‘$off’). The span within the container is used to show the hover image (‘a.home span.hover’).

    Hope this helps.

    • 0