按钮，文本和内联元素的不同颜色，两者都应该能够在悬停时改变颜色

Posted 2023-05-08

【中文标题】按钮，文本和内联元素的不同颜色，两者都应该能够在悬停时改变颜色

【英文标题】：Button, different color for text and inline element and both should be able to change color on hover

【发布时间】：2020-04-17 13:12:12

【问题描述】：

我有以下按钮：

<button class="btn btn-outline-secondary btn-lg">
  TEXT<i class="fa fa-plus"></i>
</button>

我想为按钮文本和 fa-icon 设置不同颜色的样式。当我将鼠标悬停在按钮上时，两者都应该能够更改颜色。我可以做其中任何一个，但不能同时工作：

我可以设置不同的样式：

.fa.fa-plus 
  color: green;


.btn 
  color: WHITE

这使文本变为白色，图标变为绿色（这就是我想要的）。当我将鼠标悬停在按钮上时，我现在只能更改文本颜色：

.btn:hover 
  color: BLACK;

如果按钮悬停，我如何更改图标颜色？例如，当按钮悬停时，我希望文本为黑色，图标为白色。但我无法实现后者。

【问题讨论】：

.btn:hover .fa.fa-plus color:#fff; ?

这能回答你的问题吗？ CSS :: child set to change color on parent hover, but changes also when hovered itself

【参考方案1】：

您可以对按钮内部文本和图标使用规则，如下所示：

.fa.fa-plus 
  color: green;


.btn 
  color: WHITE


.btn:hover .fa,
.btn:hover
    color: red;

<button class="btn btn-outline-secondary btn-lg">
  TEXT<i class="fa fa-plus">+</i>
</button>

【参考方案2】：

您的代码表示您想在悬停时更改按钮文本。

要做你想做的事，你应该在按钮悬停时为你的图标应用样式：

.btn:hover .fa.fa-plus 
  color: RED;

因此，在这种情况下，您会将样式应用于.fa.fa-plus，但在按钮悬停时。 希望，这对你有意义:)

【参考方案3】：

为该按钮提供一个父 div 并使用该父类添加悬停效果

<style>
.fa.fa-plus 
  color: green;


.btn 
  color: WHITE

.hover:hover .btn, .hover:hover .fa.fa-plus
color: BLACK;

</style>
<div class="hover">
<button class="btn btn-outline-secondary btn-lg">
  TEXT<i class="fa fa-plus"></i>
</button>
</div>

【讨论】：

为什么要添加父 div？我觉得没必要

【参考方案4】：

下面是如何通过父:hover属性更改子的示例，根据您希望如何为加号图标着色。

.btn:hover .fa.fa-plus 
    color: red;

【参考方案5】：

您可以使用此代码访问悬停的子元素：

.btn:hover . color: BLACK;

【参考方案6】：

在您的主页上的每个element 中逐个使用它，

对于example：

div.e:hover 
    background-color:red;