代码之家 › 专栏 › 技术社区 › Joe F

悬停时字体颜色不变

colors fonts text css html

Joe F · 技术社区 · 7 年前

现在,当我在上面悬停时,它看起来是这样的:

当我将鼠标悬停在文本上时,无法将其变为白色

.button {
	   border: 0px solid #011f4b;
	   background: #011f4b;
	   padding: 3px 21px;
	   -webkit-border-radius: 16px;
	   -moz-border-radius: 16px;
	   border-radius: 16px;
	   color: #ffffff;
	   font-size: 12px;
	   font-family: Questrial;
	   text-decoration: none;
	   vertical-align: middle;
	   letter-spacing: 2px;
    }
   
   .button:hover {
	   border: 0px solid #1292e1;
	   background: #1292e1;
	   color: white;
    }
   
   .button:active {
	   background: #1292e1;
	   color: #fff;
    }

<a href='#' class='button'>Login</a>

2 回复 | 直到 7 年前

Atimene Nazim 7 年前

尝试添加! !important

Temani Afif 7 年前

尝试添加在选择器中添加标签,以避免与站点中的其他CSS冲突:

a.button {
  border: 0px solid #011f4b;
  background: #011f4b;
  padding: 3px 21px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  color: #ffffff;
  font-size: 12px;
  font-family: Questrial;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 2px;
}

a.button:hover {
  border: 0px solid #1292e1;
  background: #1292e1;
  color: white;
}

a.button:active {
  background: #1292e1;
  color: #fff;
}

<a href='#' class='button'>Login</a>

您也可以考虑 !重要的 要强制保持白色,请执行以下操作:

a.button:hover {
      border: 0px solid #1292e1;
      background: #1292e1;
      color: white!important;
    }

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前