Question

我有以下代码：但是如何隐藏带下划线的glyphicon？

<p:commandLink ajax="false" action="#{languageGeneralListController.doEditLanguageGeneral(languageGeneral)}">
    <span class="glyphicon glyphicon-pencil" title="Editieren"></span>
</p:commandLink>

这是我的CSS：

a:link {
    color: #1BA1E2;
    text-decoration: none;
}

a:visited {
    color: #1BA1E2;
    text-decoration: none;
}

a:hover {
    color: #1BA1E2;
    border: 0px;
    text-decoration: underline;
}

a:active {
    color: #1BA1E2;
    border: 0px;
    text-decoration: underline;
}

a:hover img {
   text-decoration: none;
}

我尝试了最后一个：悬停img，但它不起作用。请有人帮助我。

Answer 1

试试这个

a:hover .glyphicon {
    text-decoration: none;
}

正如aDroidman指出你的CSS正在瞄准一个图像。

修改

看一下这个例子，看看它是否有帮助：http://jsfiddle.net/xae8n/

对于包含glyphicon的链接，您需要执行以下两项操作：

为链接指定一个类，然后使用该类禁用正常链接下划线。

将一个类分配给链接中的文本，该文本用于在（1）中的类悬停时为文本加下划线。

希望这有意义吗？

Bootstrap glyphicon链接未加下划线

1 个答案: