字形图标在悬停时改变颜色加上文本链接

Posted 2023-05-08

【中文标题】字形图标在悬停时改变颜色加上文本链接

【英文标题】：Glyphicons change color on hover plus a text link

【发布时间】：2013-11-04 18:31:16

【问题描述】：

我正在尝试将 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 都改变颜色；任何一个都悬停在上面。

帮助表示赞赏。

【问题讨论】：

并不是说它一定与问题相关，但你有一个自动关闭的a 元素和它有一个单独的关闭元素......就个人而言，我会也关闭<strong>，但也许我很挑剔。

这篇文章可能会有所帮助：***.com/questions/10803217/…

我敢说你必须手动更改它，因为你之前手动设置了伪元素的颜色。如果你只给锚标签上色，那么你应该只需要做.portal a:hover

【参考方案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; 

简而言之，少即是多。

【讨论】：

感谢您的回复。也许我在阅读它们时遗漏了一些东西，但似乎没有一个可以立即解决对元素的更改。如果我发布的 html 您会看到第一个 TD 元素是使用 Glyphicon 的 href，而第二个元素是带有 href 的文本。我可以让 CSS 达到这样的程度：当我将文本悬停时，图标和文本会发生变化，但当我将鼠标悬停在图标上时，文本不会改变颜色。我确实通过此链接尝试过***.com/questions/1462360/…

哦，所以您要更改两个元素，而不是一个元素及其伪？

是的，希望能够使 href 的链接都改变颜色。这样图标和链接文本就会改变，悬停在上面。对不起，如果我不清楚:(

在这种情况下尝试.portal div:hover a color: #f00; 或其他东西。

【参考方案2】：

css

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

【讨论】：

什么CSS？给出一些关于答案的描述！并在回答之前阅读常见问题解答！

【参考方案3】：

HTML：

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

CSS：

.mydiv:hover a color: #BC2328;

【参考方案4】：

您可以尝试通过像这样将 :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 是图标的宽度 + 一些边距和行高（或只是高度，但第一个垂直居中您的锚文本）是图标的高度

【讨论】：

如果他在.portal里面有多个锚怎么办？