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;

両端（border-top-rightとborder-bottom-right）を切り刻むか、：afterを使用してcssを追加しますが、ユーザーがタグにカーソルを合わせたときにこれらすべてを実行する必要があります。

どうすればこれを達成できますか？

4

2 に答える 2

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 に答える
1

このサイトはとても便利だと思いました：http： //apps.eky.hk/css-triangle-generator/

三角形を作成する必要があるとき。それはあなたのために三角形を生成します。

これで、三角形を生成した後、必要なのは、それを機能させるために、:beforeまたは:after目的の要素を使用することだけです。この場合も、ホバーします。

于 2012-11-23T13:21:36.493 に答える