悬停时更改字体颜色

Question

基本上，我希望这段代码做的是，每当您将鼠标悬停在按钮上时，背景会变成蓝色，而文本的颜色会变成白色。我试过：

.btn1:hover a{
  background:#fff;
}

但这没有用。

<div class="container">
   <a href="#"> <button class="btn btn1">HTML</button></a>
<a href="#"> <button class="btn btn1">C/C++</button></a>
<a href="#"> <button class="btn btn1">JavaScript</button></a>
<a href="#"> <button class="btn btn1">CSS</button></a></div>

.container{
  text-align:center;
  margin-top:200px;
}

.btn {
  border:1px solid #3498db;
  background:none;
  padding:10px 20px;
  font-size:20px;
  font-family: "Montserrat", sans-serif;
  cursor:pointer;
  margin:10px;
  transition:0.8s;
  position:relative;
  overflow:hidden;
}
.btn1 {
  color:#3498db;
}

.btn1:hover{
  background:#3498db;
}

Answer 1

您还需要将鼠标悬停时的文本颜色设置为白色：

.container {
  text-align: center;
}

.btn {
  border: 1px solid #3498db;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}

.btn1 {
  color: #3498db;
}

.btn1:hover {
  background: #3498db;
  color: #fff;
}

<div class="container">
  <a href="#"> <button class="btn btn1">HTML</button></a>
  <a href="#"> <button class="btn btn1">C/C++</button></a>
  <a href="#"> <button class="btn btn1">JavaScript</button></a>
  <a href="#"> <button class="btn btn1">CSS</button></a>
</div>

Answer 2

你正在做的小错误是你试图改变颜色这是外面而是尝试更改制作的按钮的字体，所以我认为：

.btn1:hover{
  background-color:blue; //choose your blue color
  color: white; // this defin the font color
}

对不起，如果我错了

Answer 3

您只是在最后 class 中错过了 CSS 悬停效果的白色：

.container{
  text-align:center;
  margin-top:200px;
}

.btn {
  border:1px solid #3498db;
  background:none;
  padding:10px 20px;
  font-size:20px;
  font-family: "Montserrat", sans-serif;
  cursor:pointer;
  margin:10px;
  transition:0.8s;
  position:relative;
  overflow:hidden;
}
.btn1 {
  color:#3498db;
}

.btn1:hover {
  background:#3498db;
  color: #fff
}

<div class="container">enter code here
  <a href="#"><button class="btn btn1">HTML</button></a>
  <a href="#"><button class="btn btn1">C/C++</button></a>
  <a href="#"><button class="btn btn1">JavaScript</button></a>
  <a href="#"><button class="btn btn1">CSS</button></a>
</div>

悬停时更改字体颜色

Change font color upon hover

html

css

hover