悬停时css更改按钮颜色[关闭]

Question

我试图在按钮悬停时将文本颜色从白色更改为黑色，并且代码中的所有内容都很好，除了文本颜色没有改变。有人知道我该怎么做吗？

.main__btn {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0);
  padding: 15px 50px;
  border-radius: none;
  border-color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover {
  color: #000;
}

.main__btn:hover:after {
  width: 100%;
}

<button class="main__btn" id="button1"><a href="#">button1</a></button>

Answer 1

您可能希望更改锚点 (a) 标记上的 color，而不是 button。

.main__btn:hover a {
  color: #000;
}

由于您在上面的锚标记上设置了color: #fff;，因此阻止了color 的.main__btn:hover 的继承。

Answer 2

锚标记的颜色是白色。在父级上应用color:#000 不会改变其颜色。

改为将color:#000 应用于锚点。

.main__btn {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0);
  padding: 15px 50px;
  border-radius: none;
  border-color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover a{
  color: #000;
}

.main__btn:hover:after {
  width: 100%;
}

<button class="main__btn" id="button1"><a href="#">button1</a></button>

请注意，按钮中的锚点是无效的 HTML。_{- Roy}