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

This site is best viewed in a modern browser with JavaScript enabled.

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

The attachments of this post were removed during the platform migration in 2018

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

The attachments of this post were removed during the platform migration in 2018

toptomato

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

coothead

[indent]No problem, you're very welcome. [/indent]

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. :eek:

coothead