为什么a：hover显示两种不同的颜色？

Question

通常，当我将链接悬停时，链接变为绿色。但是，链接周围也显示红色。我不明白。

.myButtonRegister{
  float: left;
  background-color: #C22312;
  height: 48px;
  width: 168px;
  text-align: center;
  font-family: 'Pridi', serif;
  font-size: 26px;
  padding-top: 10px; 
  word-spacing: 0px;
}

.myButtonRegister a {
  color: #f2f2f2;
  text-decoration: none;
}

.myButtonRegister a:hover {
  background-color: green;
  color: black;
}

谢谢

Answer 1

由于<a>链接标记的大小是它包含的内容的大小，因此背景不会覆盖其较大的整个父元素。

您可以通过添加以下内容来强制链接具有与容器相同的大小：

.myButtonRegister a {
  display: block;
  width: 100%;
  height: 100%;
  ...
}

.myButtonRegister {
  float: left;
  background-color: #C22312;
  height: 48px;
  width: 168px;
  text-align: center;
  font-family: 'Pridi', serif;
  font-size: 26px;
  line-height: 48px; /* added */
  /* padding-top: 10px; */
  word-spacing: 0px;
}

.myButtonRegister a {
  color: #f2f2f2;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.myButtonRegister a:hover {
  background-color: green;
  color: black;
}

<div class="myButtonRegister"><a href="#">Sample text</a></div>

我建议摆脱div容器，但仅使用链接标记。

.myButtonRegister {
  display: inline-block;
  height: 48px;
  width: 168px;
  font-family: 'Pridi', serif;
  font-size: 26px;
  line-height: 48px;
  text-decoration: none;
  text-align: center;
  background-color: #C22312;
  color: #f2f2f2;
}

.myButtonRegister:hover {
  background-color: green;
  color: black;
}

<a class="myButtonRegister" href="#">Sample text</a>

Answer 2

将鼠标悬停在<a>标记上时，还会在其父元素.myButtonRegister上触发鼠标悬停。您的html可以简化为：

<button class="myButtonRegister">
 <a href="#">REGISTER</a>
</button>

对此：

<a class="myButtonRegister">REGISTER</a>

然后在类myButtonRegister上触发悬停动画。因为button标签和a标签均可用于呈现按钮。