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

悬停时字体颜色不变

colors fonts text css html

Joe F · 技术社区 · 8 年前

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

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

.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 回复 | 直到 8 年前

Atimene Nazim 8 年前

尝试添加! !important

Temani Afif 8 年前

尝试添加在选择器中添加标签,以避免与站点中的其他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;
    }

推荐文章

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

Koren Lahav · 字体未能正确上传至android studio

1 年前

Marcin Szwarc · CSS字体家族中的字体是如何替换的

1 年前

gman · 是否有一种CSS/HTML字体大小,unicode框元素应该完全垂直对齐?

1 年前

Andrew · 标题是粗体,但标签不是。该怎么办?

1 年前

Francis · 显示变量中的fontello字符

1 年前

Bethany · 正斜杠导致自定义字体向后书写

1 年前

B.O.M.B · 使用SwiftUI Xcode 15在启动屏幕中选择自定义字体

2 年前

Arkit_Sutariya · 所有fontFamily未在HTML中的<span>中间呈现

2 年前

Andrew Wei · 为什么我的自定义字体没有应用在我的NextJS/Tailwind项目中?

2 年前