0

私のウェブサイトのメニューでは、 a:hover にテキスト装飾を追加して » 記号/記号にしたいと考えています。

私はこのように試しました：

.navbar .nav > li:before > a:hover {
    content: "»";
    padding-right: 10px;
    color: #fff;
}

提案された別の質問のようですが、表示されるのはシンボルではなく、アクティブな状態のテキストです。私のCSSは間違っていますか、またはロールオーバーでJavascriptを介してこれを行う方法はありますか?

そして、ここに私のHTMLがあります:

<div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Rapid Newsletter Plus</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#features">Features</a></li>
                            <li><a href="#packages">Packages</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                        <ul class="nav pull-right">
                            <li><a href="http://plus.rapidnewsletter.com">&raquo; my Account</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

更新: CSS を少し調整したところ、>> がテキスト形式で表示されますが、記号 >> に変換されません。何かご意見は？

.navbar .nav > li > a:hover:before {
    content: "&raquo;";
    color: #fff;
}
4

2 に答える 2

3

Unicode である必要があります。

.navbar .nav > li > a:hover:before {
    content: "\00BB";
    color: #fff;
}

https://r12a.github.io/apps/conversion/ - 今後の参考のために、ここで HTML を Unicode を含むさまざまなコードに変換します。CSSエスケープと呼ばれる右下のボックスは、この目的に適しています。

于 2012-11-03T22:00:46.767 に答える
0

CSS では、HTML の名前付きエンティティ (または HTML の数値エンティティ) を使用できないため&raquo;、理解さ&#187;れ&#xbb;ませんが、これらは CSS ではなく HTML 用です。

CSS では、エスケープ シーケンスを使用してその文字を指定できます\BB。つまり、その文字の 16 進数の Unicode エンコーディングです。

于 2012-11-03T21:56:48.367 に答える