如何更改按钮内文本的悬停颜色[重复]答案

【问题标题】：How to change hover color of text inside button [duplicate]如何更改按钮内文本的悬停颜色[重复]
【发布时间】：2020-11-04 18:29:08
【问题描述】：

我有这个按钮元素

<div class="subscription-form">
<button type="submit" class="btn btn-subscription btn-block">
    <h4>Yes! I Want This Book <i class="fas fa-angle-double-down"></i></h4>
    <p>... and the 50% Coupon Discount Code!</p>
</button>
</div>

当我将鼠标悬停在按钮上时，我想更改里面文本的颜色。我想对 h4 和 p 文本使用相同的悬停颜色。

这是我当前的 css

.subscription-form button.btn-subscription {
    background-color: #f0b911;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-left: 15px;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;

}


.subscription-form button.btn-subscription:hover {
    background-color: #d9a70f;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}


.subscription-form button.btn-subscription h4 {
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(0,0,0, .8);
}

.subscription-form button.btn-subscription p {
    color: rgba(0,0,0, .5);
}

我已经尝试过这个解决方案：

.subscription-form button.btn-subscription h4:hover, .subscription-form button.btn-subscription p:hover {
    color: red;
}

但这只有在我将鼠标悬停在 h4 和 p 标签上时才有效。因此，当我将鼠标悬停在按钮本身上时，我想为 h4 和 p 应用相同的颜色，而不仅仅是文本。

【问题讨论】：

I would like to apply the same color for both h4 and p when I hover over the button itself 。这是一个正确的逻辑。从这个逻辑来看，逻辑解决方案不是 btn:hover h4 { styles } 吗？这被读作'当按钮悬停时将样式添加到它的子 h4'。尝试在谷歌上搜索I would like to apply the same color for both h4 and p when I hover over the button。你会立即找到你的答案。请在 SO 上发布之前做一些研究。 99% 的问题都曾被问过

标签： html css

【解决方案1】：

你需要在按钮悬停中添加css，而不是元素悬停

.subscription-form button.btn-subscription {
    background-color: #f0b911;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-left: 15px;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}

.subscription-form button.btn-subscription:hover {
    background-color: #d9a70f;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}

.subscription-form button.btn-subscription h4 {
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(0,0,0, .8);
}

.subscription-form button.btn-subscription p {
    color: rgba(0,0,0, .5);
}
.subscription-form button.btn-subscription:hover h4, .subscription-form button.btn-subscription:hover p {
    color: red;
}

<div class="subscription-form">
<button type="submit" class="btn btn-subscription btn-block">
    <h4>Yes! I Want This Book <i class="fas fa-angle-double-down"></i></h4>
    <p>... and the 50% Coupon Discount Code!</p>
</button>
</div>

【讨论】：

【解决方案2】：

您必须删除 h4 和 p 的颜色才能使其正常工作。

然后将color: red; 添加到“.subscription-form button.btn-subscription:hover”，它应该可以满足您的要求。

I changed your example to make it work (jsfiddle)

【讨论】：