我可以使用什么CSS来弯曲列表项效果onhover？

Question

当我将鼠标悬停在侧栏上的列表项时，我想在列表项中放置一个3d弯曲的外观。

我如何用css做到这一点？

EDIT ::

我在侧栏中有一个列表。

当我将鼠标悬停在某个链接上时，我希望它看起来像是写在圆柱体的曲面上

Answer 1

您可以更改列表项的背景以包含3D曲线图像

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

因为IE6仅在锚元素上支持这种类型的悬停，您可能希望将悬停应用于列表元素内的锚点

<强> HTML

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

<强> CSS

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

Answer 2

您可以使用OnMouseOver和OnMouseOut进行简单的悬停效果...

Readm更多：

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

所以：

• 获取基本图片
• 获取3D图像
• 当鼠标越过该项目时 - ＆gt; OnMouseOver设置3d Image
• 当鼠标离开项目时 - ＆gt; OnMosueOut设置了基本图像

Answer 3

我认为你需要一个背景图片才能做到这一点。所有浏览器都支持锚标记上的悬停属性（我怀疑你用于菜单容器），但是一些较新的浏览器支持所有元素的悬停属性。我知道firefox支持这个

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

然后让背景图像成为你的3d曲线。