Hover transition

[simonuk]

Hi,

I finally need some help :-)

I need to give a JS hover transition to a CSS driven menu and would like to know if it's possible in my situation and if not is there another way.

Scenario:

Box with curved edges on both the top left and top right. To make the tabs fluid and scalable I have a left background image on the one tag which contains the left curve plus the full width of the menu background. I then also have a span which contains a 4x4 pixel image for the right curve. The right curve also contain a small portion of the background image. So it looks like:

Big image with no right curve
{---------------
----------------

Little image with just the right curve

}

How could create a transitions on this kind of scenario or how would you achieve the same result for a scalable curved box?

[penders]

I don't think you need to use JS to achieve what you are after - you can do it all with CSS. (Unless there is some requirement to use JS?)

If, for instance, your span is inside an anchor container then you can utilize the a:hover pseudo class to influence the span as well.

<a class="rounded" href="#"><span class="rounded_right">Hover Over Here</span></a>

a.rounded { 
display:block; 
background:#c0c0ff url(img/tab_left.gif) 0 0 no-repeat; 
width:8em; 
text-align:center; 
} 
a.rounded span.rounded_right { 
display:block; 
background:transparent url(img/tab_right.gif) right 0 no-repeat; 
} 
a.rounded:hover { 
background:#ffc0c0 url(img/tab_left.gif) 0 -100px no-repeat; 
} 
a.rounded:hover span.rounded_right { 
background:transparent url(img/tab_right.gif) right -100px no-repeat; 
}

Is that the sort of thing you are after?

[simonuk]

That is a nice solution but not one I can use because it is a JS driven slow transition between hovers that the client wants. I already have the CSS hover setup but he wants something more fancy :-/

It was an excellent answer though so thank you :-)

I'm going to push back to the client and explain the problems, see if he will let me drop this one.