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;不会被理解，它们是用于 HTML，而不是 CSS。

在 CSS 中，您可以使用转义序列指定该字符\BB，即该字符的十六进制 unicode 编码。

于 2012-11-03T21:56:48.367 回答