2

我正在尝试将 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;
}

但这一次只会改变一个，因为我希望图标和文本 url 都改变颜色；其中任何一个都悬停在上面。

帮助表示赞赏。

4

4 回答 4

3

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

您可以在此示例中看到第一个锚标记如何在伪元素上设置特定颜色，而第二个锚标记从其父元素读取。

<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; }

简而言之，少即是多。

于 2013-10-25T15:12:26.903 回答
1

css

.no:hover [class*="glyphicons"]:before {
 color: yellow !important;}
于 2013-12-13T05:19:50.963 回答
0

您可以尝试通过像这样将 :hover 伪类添加到父 div 来选择这两个元素（未测试）：

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

编辑

感谢乍得的评论，我发现这是一种不好的做法。因此，您应该将您的锚标记包装在一个单独的包装器中，或者以不同的方式给这个锚定一个图标。我建议这样做（有时桌子会有点乱）：

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 是图标的宽度 + 一些边距和行高（或只是高度，但第一个垂直居中您的锚文本）是图标的高度

于 2013-10-25T15:05:24.137 回答
0

HTML：

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

CSS：

.mydiv:hover a {color: #BC2328;}
于 2013-10-25T15:06:59.973 回答