无法在悬停时更改链接类

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 {
  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>

Answer 2

.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;
}

<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;
}

首先，我需要将按钮嵌套在链接中，而不是相反。 这允许整个按钮成为链接。 接下来，由于按钮现在嵌套在链接中，我可以为内部元素（按钮）创建样式，而不是尝试将父元素样式化，而不是为导致冲突的子元素设置样式。无尽地感谢所有为找到完整解决方案做出贡献的人，不幸的是，一些答案已被删除，所以我无法单独归因，但这都是有用的。 干杯！