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

Question

我有这个纽扣元素

<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应用相同的颜色，而不仅仅是文本。

Answer 1

你必须删除h4的颜色

然后添加颜色：红色；到"。订阅-表单button.btn-订阅：悬停"，它应该执行您的要求。

我更改了您的示例以使其生效（JSFIDLE）

Answer 2

您需要在按钮悬停中添加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>