css - 为什么 <a> 标签在应用悬停背景时给出与 <li> 标签不同的输出？

Question

Link to my jsfiddle work

我将“导航栏”从基本的标题导航栏切换为自定义布局。 我将我的 li 标签更改为 a 标签以包含类和单独的 css 设计。

进行此更改后，当我将鼠标悬停在链接上时，我的链接没有改变颜色。 当我在我的标签中包含类时，为什么会发生这种情况是有原因的。

.tl,
.tc,
.tr,
.bl,
.bc,
.br {
  text-decoration: none;
  color: green;
  font-size: 24px;
  font-family: Bungee Shade;
  cursor: pointer;
  border-radius: 10px;
  transition: .5s;
  position: fixed;
}

.tl {
  top: 45px;
  left: 60px;
}

.tc {
  margin-top: 45px;
  text-align: center;
  right: 50%;
}

.tr {
  margin-top: 45px;
  right: 60px;
}

.bl {
  bottom: 45px;
  margin-left: 60px;
}

.bc {
  bottom: 45px;
  text-align: center;
  right: 50%;
}

.br {
  bottom: 45px;
  right: 60px;
}

.tl:hover,
.tc:hover,
.tr:hover,
.bl:hover,
.bc:hover,
.br:hover {
  background-color: orange;
}

<div class="navbar">
  <a class="tl" href="#">HOME</a> 
  <a class="tc" href="#">MUSIC</a>
  <a class="tr" href="#">BIO</a>
  <a class="bl" href="#">TOUR</a>
  <a class="bc" href="#">SHOP</a>
  <a class="br" href="#">TSA</a>
</div>

Answer 1

请尝试在标签类(而不是悬停状态)上添加一些填充或一些尺寸，看看它是否有效。 a 标签内联工作，因此如果它们没有尺寸，则它们没有背景。