在悬停时更改字体颜色

发布于 2025-01-22 16:26:37 字数 876 浏览 3 评论 0原文

基本上，我希望该代码要做的是每当您悬停在按钮上时，背景会变成蓝色，并且文本的颜色会变白。我尝试过：

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

原文

basically, what I would like this code to do is whenever you hover over the button, the background will turn blue, and the text's color will turn white. I have tried:

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

but this did not work.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰葑 2025-01-29 16:26:37

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

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

You need to also set the text color to white on hover:

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

回复收藏 0 原文

尹雨沫 2025-01-29 16:26:37

您要做的小错误是您正在尝试更改的颜色
哪个在
而是尝试更改所制作的按钮的字体，所以我想：

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

对不起，如果我错了

the small error you are doing is you are trying to change the color of
which is outside of
instead try changing the font of the button which is made so i think:

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

sorry if im wrong

回复收藏 0 原文

葬シ愛 2025-01-29 16:26:37

您只是在上一堂课中缺少白色的颜色，因为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>

You were just missing the color white in the last class for the hover effect with 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>

回复收藏 0 原文

~没有更多了~