What CSS could I use for Curved list item effect onhover?

I want to put a 3d curved look in a list item I have whenever you hover on a list item at my sidebar .

How would I do this with css?

E开发者_开发百科DIT::

I have a list in a side bar.

When I hover over a link I would like it to appear as if it is written on the curved surface of a cylinder

You can change the background of the list item to contain a 3D curved image

 li:hover{
  background: url(/images/curved3Dbackground.png);
 }

Because IE6 only supports this type of Hover on anchor elements, you may want to apply the hover to an anchor inside the list element

HTML

<li><a href="link.html">Text</a></li>

CSS

 li a:hover{
  background: url(/images/curved3Dbackground.png);
 }

An hover effect you simple do with OnMouseOver and OnMouseOut...

Readm more:

http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/

So:

• get basic image
• get 3d image
• When mouse get over the item -> OnMouseOver set the 3d Image
• When mouse get out the item -> OnMosueOut set back the basic image

I would think you would need a background image to do this. All browsers support the hover attribute on an anchor tag (which I doubt you use for your menu container), but some of the newer ones support the :hover attributes for all elements. I know firefox supports this

div:hover{background-image:url(myImage.png);}

Then just have the background image your 3d curvy thing.