悬停过渡时的颜色更改不起作用（CSS）答案

【问题标题】：Color change on hover transition doesn't work (CSS)悬停过渡时的颜色更改不起作用（CSS）
【发布时间】：2016-12-21 00:37:19
【问题描述】：

我试图让简单的标题按钮在悬停时改变颜色。我可能不小心让我的 CSS 过于复杂，因为我最初是在做一些不同的事情。无论如何，即使使用 !important，颜色转换也不起作用。注意：所有关于 line-height 和 header.smaller 的东西仍然被用于缩小标题，我没有包含在代码中（所以请不要删除它们）。谢谢！请参阅下面的代码（也在https://jsfiddle.net/j9f14cyw/2/）：

CSS：

header {
  top: 0;
  width: calc(90% - 80px);
  padding: 0 40px;
  border-top: 10px solid white;
  border-bottom: 2px solid #ff0000;
  position: fixed;
  background-color: white;
  height: 120px;
  overflow: hidden;
  z-index: 999;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}

header nav {
  display: inline-block;
  float: right;
}

header nav * {
  -o-transition: color 0.15s linear !important;
  -moz-transition: color 0.15s linear !important;
  -webkit-transition: color 0.15s linear !important;
  -ms-transition: color 0.15s linear !important;
  transition: color 0.15s linear !important;
}

header.smaller {
  height: 75px;
}

#banner {
  width: calc(80% - 40px);
  height: 500px;
  position: fixed;
  top: 68px;
  background-image: url(../img/favicon.png);
  margin-left: 20px;
  margin-right: 20px;
}

a.hdrBtn {
  font-family: 'futuraBook', sans-serif;
  color: black;
  padding: 16px 0 10px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  outline: none;
  display: inline-block;
  text-align: center;
  height: 20px;
  -o-transition: color 0.15s linear !important;
  -moz-transition: color 0.15s linear !important;
  -webkit-transition: color 0.15s linear !important;
  -ms-transition: color 0.15s linear !important;
  transition: color 0.15s linear !important;
  -o-transition: line-height 0.2s linear !important;
  -moz-transition: line-height 0.2s linear !important;
  -webkit-transition: line-height 0.2s linear !important;
  -ms-transition: line-height 0.2s linear !important;
  transition: line-height 0.2s linear !important;
  line-height: 80px;
}

a.hdrBtn:hover {
  color: #ff0000;
}

a.hdrBtn:not(:last-child)::after {
  content: "|";
  color: lightgrey;
  margin-left: 5px;
  margin-right: 0;
}

.hdrLogo {
  font-size: 40px;
  height: 40px;
  line-height: 100px;
  color: #ff0000;
  font-family: 'futuraLight', sans-serif;
  text-decoration: none;
  -o-transition: line-height 0.2s linear !important;
  -moz-transition: line-height 0.2s linear !important;
  -webkit-transition: line-height 0.2s linear !important;
  -ms-transition: line-height 0.2s linear !important;
  transition: line-height 0.2s linear !important;
}

header.smaller nav *,
header.smaller a {
  -o-transition: color 0.15s linear !important;
  -moz-transition: color 0.15s linear !important;
  -webkit-transition: color 0.15s linear !important;
  -ms-transition: color 0.15s linear !important;
  transition: color 0.15s linear !important;
  line-height: 35px;
}

header.smaller nav {
  float: right;
}

#navImg {
  max-width: 350px;
  margin: 0;
  float: left;
  margin: 20px 0 0 30px;
}

HTML：

<!DOCTYPE html>
<html>
<body>
  <header>

    <nav>
      <a class="hdrBtn" href="">Stuff1</a>
      <a class="hdrBtn" href="">Stuff2</a>
      <a class="hdrBtn" href="">Stuff3</a>
      <a class="hdrBtn" href="">Stuff4</a>
    </nav>

  </header>
</body>
</html>

【问题讨论】：

它似乎在这里工作：jsfiddle.net/674svcpa 悬停时颜色变为红色不是你想做的吗？

标签： html css colors hover css-transitions

【解决方案1】：

您的 jsfiddle 中的颜色变化正在起作用。但是，如果它在您的系统上不起作用，我会尝试将悬停 css 设置为重要并检查结果是否符合预期：

a.hdrBtn:hover {
  color: #ff0000 !important;
}

我还会检查控制台中的元素（例如 Chrome），以检查是否有其他类或样式覆盖您的更改

另外，也许您正在尝试实现与您在此处解释的不同的目标。但是在你的情况下，标签的颜色变化只会影响字体（不像一个围绕它的盒子，因为你还没有创建一个）

【讨论】：

感谢您的回答，但我在帖子中犯了一个错误。无效的是 0.15 秒的颜色过渡。

【解决方案2】：

你需要在 CSS 代码中删除 header nav * 并改为 header nav :hover

完整代码：

编辑 CSS 和 HTML：

header {
  top: 0;
  width: calc(90% - 80px);
  padding: 0 40px;
  border-top: 10px solid white;
  border-bottom: 2px solid #ff0000;
  position: fixed;
  background-color: white;
  height: 120px;
  overflow: hidden;
  z-index: 999;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}

header nav {
  display: inline-block;
  float: right;
}

header nav :hover {
  -o-transition: color 0.15s linear !important;
  -moz-transition: color 0.15s linear !important;
  -webkit-transition: color 0.15s linear !important;
  -ms-transition: color 0.15s linear !important;
  transition: color 0.15s linear !important;
}

header.smaller {
  height: 75px;
}

#banner {
  width: calc(80% - 40px);
  height: 500px;
  position: fixed;
  top: 68px;
  background-image: url(../img/favicon.png);
  margin-left: 20px;
  margin-right: 20px;
}

a.hdrBtn {
  font-family: 'futuraBook', sans-serif;
  color: black;
  padding: 16px 0 10px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  outline: none;
  display: inline-block;
  text-align: center;
  height: 20px;
  -o-transition: color 0.15s linear !important;
  -moz-transition: color 0.15s linear !important;
  -webkit-transition: color 0.15s linear !important;
  -ms-transition: color 0.15s linear !important;
  transition: color 0.15s linear !important;
  -o-transition: line-height 0.2s linear !important;
  -moz-transition: line-height 0.2s linear !important;
  -webkit-transition: line-height 0.2s linear !important;
  -ms-transition: line-height 0.2s linear !important;
  transition: line-height 0.2s linear !important;
  line-height: 80px;
}

a.hdrBtn:hover {
  color: #ff0000;
}

a.hdrBtn:not(:last-child)::after {
  content: "|";
  color: lightgrey;
  margin-left: 5px;
  margin-right: 0;
}

.hdrLogo {
  font-size: 40px;
  height: 40px;
  line-height: 100px;
  color: #ff0000;
  font-family: 'futuraLight', sans-serif;
  text-decoration: none;
  -o-transition: line-height 0.2s linear !important;
  -moz-transition: line-height 0.2s linear !important;
  -webkit-transition: line-height 0.2s linear !important;
  -ms-transition: line-height 0.2s linear !important;
  transition: line-height 0.2s linear !important;
}

header.smaller nav *,
header.smaller a {
  -o-transition: color 0.15s linear !important;
  -moz-transition: color 0.15s linear !important;
  -webkit-transition: color 0.15s linear !important;
  -ms-transition: color 0.15s linear !important;
  transition: color 0.15s linear !important;
  line-height: 35px;
}

header.smaller nav {
  float: right;
}

#navImg {
  max-width: 350px;
  margin: 0;
  float: left;
  margin: 20px 0 0 30px;
}
nav #color1:hover{
  color:blue;
}
nav  #color2:hover{
  color:red;
}
nav #color3:hover{
  color:green;
}
nav  #color4:hover{
  color:yellow;
}

<body>
  <header>

    <nav>
      <a id="color1" class="hdrBtn" href="">Stuff1</a>
      <a id="color2" class="hdrBtn" href="">Stuff2</a>
      <a id="color3" class="hdrBtn" href="">Stuff3</a>
      <a id="color4" class="hdrBtn" href="">Stuff4</a>
    </nav>

  </header>
</body>

【讨论】：

你的代码已经和他的代码做同样的事情了。如果您将悬停事件添加到整个导航栏，您将无法在不同按钮上创建颜色更改。您所要做的就是在悬停时更改整个导航栏的颜色
@tom 。我一直在 Snippet 中编辑 HTML 和 CSS 代码.. 或者你可以通过 JSFiddle 看到：https://jsfiddle.net/j9f14cyw/3/

【解决方案3】：

在这个类（a.hdrBtn）中你不需要添加这个过渡：

-o-transition: line-height 0.2s linear !important;
  -moz-transition: line-height 0.2s linear !important;
  -webkit-transition: line-height 0.2s linear !important;
  -ms-transition: line-height 0.2s linear !important;
  transition: line-height 0.2s linear !important;

【讨论】：