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

你在这里：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

无法在悬停时获取要更改的链接类

2 个答案: