Невозможно получить класс связи для изменения при зависании

Question

Итак, у меня есть ссылка внутри кнопки с назначением класса. Класс ссылок диктует цвет, однако при наведении не изменяется в соответствии с инструкциями. Может ли кто-нибудь помочь мне найти решение для исправления?

Вот HTML ...

<div class="row block well" id="section5"> 
    <h1 style="text-align:center">Financing</h1> 
    <button class = "button1"><a href="https://form.jotform.com/70176329059157" target="_blank" class="apply">Apply for a Vehicle Loan</a></button> 
</div> 

А вот CSS ...

.button1 { 
    display: block; 
    background-color: white; 
    font-size: 30px; 
    border: 4px solid #b5cfc1; 
    border-radius: 10px; 
    margin: 0 auto; 
} 

.button1:hover { 
    background-color: #3d4e3b; 
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
} 

.apply { 
    color: #3d4e3b; 
} 

.apply:hover span{ 
    color: white; 
} 

Answer 1

.button1 { 
 
\t display: block; 
 
\t background-color: white; 
 
\t font-size: 30px; 
 
\t border: 4px solid #b5cfc1; 
 
\t border-radius: 10px; 
 
\t margin: 0 auto; 
 
\t color: #3d4e3b; 
 
} 
 

 
.button1:hover { 
 
\t background-color: #3d4e3b; 
 
\t box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
 
\t color: #b5cfc1; 
 
}

<div class="row block well" id="section5"> 
 
    <h1 style="text-align:center">Financing</h1> 
 
    <a href="https://form.jotform.com/70176329059157" target="_blank"><button class="button1">Apply for a Vehicle Loan</button></a> 
 
</div>

Лука ваш ответ работал для окрашивания, но ссылка была измельчается. Поработав над этим, я нашел решение, которое позволяет использовать ссылку, чтобы следовать стилю и по-прежнему оставаться функциональным. См. Ниже ...

<div class="row block well" id="section5"> 
    <h1 style="text-align:center">Financing</h1> 
    <a href="https://form.jotform.com/70176329059157" target="_blank"><button class="button1">Apply for a Vehicle Loan</button></a> 
</div> 


.button1 { 
    display: block; 
    background-color: white; 
    font-size: 30px; 
    border: 4px solid #b5cfc1; 
    border-radius: 10px; 
    margin: 0 auto; 
    color: #3d4e3b; 
} 

.button1:hover { 
    background-color: #3d4e3b; 
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
    color: #b5cfc1; 
} 

Во-первых, мне нужно было вставить кнопку в ссылку, а не наоборот. Это позволяет всей кнопке быть ссылкой. Затем, поскольку кнопка теперь была вложена в ссылку, я мог бы создать стиль для внутреннего элемента (кнопки), а не пытаться стилизовать родительский элемент, а не стилизовать дочерний элемент, который вызывает конфликт. Бесконечное спасибо всем, кто внес свой вклад в поиск полного решения, к сожалению, некоторые ответы были удалены, поэтому я не могу относиться индивидуально, но все это было полезным. Ура!

Answer 2

Здесь вы:

.button1 { 
 
    display: block; 
 
    background-color: white; 
 
    font-size: 30px; 
 
    border: 4px solid #b5cfc1; 
 
    border-radius: 10px; 
 
    margin: 0 auto; 
 
} 
 
.button1:hover { 
 
    background-color: #3d4e3b; 
 
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
 
} 
 
.apply { 
 
    color: #3d4e3b; 
 
} 
 
.button1:hover .apply { 
 
    color: white; 
 
}

<div class="row block well" id="section5"> 
 
    <h1 style="text-align:center">Financing</h1> 
 
    <button class="button1"><a href="https://form.jotform.com/70176329059157" target="_blank" class="apply">Apply for a Vehicle Loan</a> 
 
    </button> 
 
</div>