0

我有一个标签，带有以下标记：

#leftMenu ul li a   {color: #111; text-decoration: none; display: block;}

我希望能够将鼠标悬停在它上面，并显示一个三角形的末端。类似于这个形状：

http://www.promotionalpromo.com/Upfiles/Prod_v/1-7-8-x-2-7-8--Long-Arrow_2010017055476.jpg

但不是具有相同的尺寸，更多的是： width: 200px; height: 20px;

要么我砍掉两端（右上边框和右下边框），要么用 :after 添加 css，但是当用户悬停标签时，我需要这一切发生。

我怎样才能做到这一点？

4

2 回答 2

1

我发现这个网站非常有用： http ://apps.eky.hk/css-triangle-generator/

当我需要创建三角形时。它为您生成一个三角形。

现在，在您生成三角形之后，您需要做的就是使用:before或:after在您想要的元素上使其工作，在您的情况下也可以悬停。

于 2012-11-23T13:21:36.493 回答
1

仅供参考，这是我的做法：

#leftMenu ul li a   {color: #111; text-decoration: none; display: block; position: relative;}
#leftMenu ul li a:hover {color: #555; text-decoration: underline; background: #EEE; }
#leftMenu ul li a:hover:after 
            {
                content:"";
                float:right;
                position:absolute; top:0; right:-12px; width:0; height:0;
                border-style: solid;
                border-width: 13px 0 12px 12px;
                border-color: transparent transparent transparent #EEE;
            }
于 2012-11-23T13:45:36.310 回答