Question

我正在尝试使用Glyphicons作为门户网站的想法，当图标悬停在相关链接上时，也会改变颜色。

<div class="portal">
<table>
<tr>
<td><div align="center"><a href="clientarea.php" class="glyphicons home"/></a></div></td>
<td><strong><a href="clientarea.php">Home</a></td>
</tr>
</table>
</div>

我试过以下

.portal a:hover {
color: #BC2328;
}

.portal a:hover:before {
color: #BC2328;
}

但这只会改变一个，因为我希望图标和文字网址都能改变颜色;其中任何一个都悬停在上面。

帮助表示赞赏。

Answer 1

就像我在评论中所说，我认为问题在于你设置了伪元素的特定颜色。如果你让伪元素从其父元素的样式中读出，它将随之改变颜色。

您可以在this example中看到第一个锚标记在伪元素上具有特定颜色集的方式，而第二个锚标记从其父元素中读取。

<a href="#" class="setColor">This pseudo element has a specific color set</a>
<a href="#" class="noSetColor">This pseudo element has no specific color</a>

.setColor { color: #f00; }
.setColor:before { color: #f00; content: '#'; }
.setColor:hover { color: #00f; }

.noSetColor { color: #0f0; }
.noSetColor:before { content: '#'; }
.noSetColor:hover { color: #f0f; }

简而言之，少即是多。

Answer 2

CSS

.no:hover [class*="glyphicons"]:before {
 color: yellow !important;}

Answer 3

您可以通过添加以下内容来尝试选择这两个元素：将hover伪类添加到父div中（如下所示）：

.portal:hover a, .portal:hover a:before {
    color: #BC2328;
}

修改

感谢Chad的评论，我发现这是一个不好的做法。因此，您应该将锚标记包装在单独的包装中，或者以不同的方式为此锚点赋予图标。我建议做这样的事情（表格有时会变得有些混乱）：

HTML：

<div class="portal"> <a class="certain-icon" href="clientarea.php" title="Home">Home</a> </div>

CSS：

a.certain-icon { padding-left: 30px; line-height: 20px; background: url(certain-icon.png) left center no-repeat; } a.certain-icon:hover { color: #BC2328; background: url(certain-icon-active-state.png) left center no-repeat; }

其中padding-left是图标的宽度+一些边距和行高（或只是高度，但第一个垂直居中于你的锚文本）是图标的高度

Answer 4

HTML：

<td><div align="center" class="mydiv"><a href...

CSS：

.mydiv:hover a {color: #BC2328;}

Glyphicons在悬停时加上文本链接的颜色

4 个答案: