best strategy for this roll-over?, 2 elements, see attached .gif

[toptomato]

just thought it'd be a good idea to run this by this group.

what's the best strategy to use for programming a rollover, without using javascript or jQuery?

the way i have it now is not good enough. here's what happens:
the mouse enters the LI area and the star fades in (incorrectly, see below) but the text color does not change, so it looks out of sync. the text only changes when the mouse is right on top of it.

the star is set as a the List Element's background image, only for a hover state. i set to easing so what happens is it animates to the background position offset. ugg...

i could do with jQuery but would prefer just to use CSS. any ideas?

what i'd like is (predictably) the star to fade in simultaneous to the text changing color. this should happen as soon as the mouse enters the LI area.

feedback would be greatly appreciated!, thanks

[lazyminion]

Could you use z-index and make the image hide behind then when hover it comes above the image?

Something like?

a {
position:relative; z-index:1;
}

a:hover {
z-index:1000 /* doesn't have to be 1000 just waah ever... */
}

[coothead]

Hi there toptomato,

check out the attachment to see a possible solution.



coothead

[toptomato]

wow, thanks guys. thanks for taking the time to help with my post. appreciate it

[coothead]

No problem, you're very welcome.

coothead

[toptomato]

coothead i went to send you a personal message but couldn't

[coothead]

Hi there toptomato,

I disabled that facility for various reasons.

One of those reasons being that I was getting requests
to help solve problems outside the forum boards.

coothead