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

Question

I am trying to have simple header buttons that change color when they are hovered over. 我正在尝试使用简单的标题按钮，将它们悬停时会更改颜色。 I may have accidentally over complicated my CSS, because I was originally doing something different. 我可能不小心将CSS复杂化了，因为我本来是在做一些不同的事情。 Regardless, even with a !important, the color transition doesn't work. 无论如何，即使使用！important，颜色过渡也不起作用。 Note: All of the stuff about line-height and header.smaller is still being used for a shrinking header, which I did not include in the code (so please don't delete them). 注意：关于line-height和header.smaller的所有内容仍用于缩小标题，我没有将其包括在代码中（因此请不要删除它们）。 Thanks! 谢谢！ See code below (also on https://jsfiddle.net/j9f14cyw/2/ ): 参见下面的代码（也在https://jsfiddle.net/j9f14cyw/2/上）：

CSS: 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: 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>

Answer 1

The color change in your jsfiddle is working. jsfiddle中的颜色更改正在起作用。 If it does not work on your system however, I would try to set the hover css to important and check if the results are as expected then: 但是，如果它在您的系统上不起作用，我将尝试将悬停css设置为重要，并检查结果是否符合预期，然后：

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

I would also inspect the element in the console (eg Chrome) to check if there are other classes or styles overwriting your changes 我还将检查控制台中的元素（例如Chrome），以检查是否还有其他类或样式覆盖您的更改

Also, maybe you are trying to do achieve something different than you explained here. 另外，也许您正在尝试实现与此处说明不同的目标。 But a color change of the tag effects in your case only the font (not like a box round it or so, as you haven't created one) 但是标记的颜色变化只会影响字体（不像围绕它的盒子，因为您尚未创建字体）

Answer 2

in this class (a.hdrBtn) you don't need to add this transition : 在此类（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;

Answer 3

You need to delete header nav * in CSS code and change to header nav :hover 您需要在CSS代码中删除标头nav *并更改为标头nav：hover

Full code: 完整代码：

Edit CSS & HTML: 编辑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>

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

问题描述

3 个解决方案

解决方案1
2 2016-08-14 16:54:39

解决方案2
0 2016-08-15 00:28:42

解决方案3
-1 2016-08-14 16:56:46

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

问题描述

3 个解决方案

解决方案1 2 2016-08-14 16:54:39

解决方案2 0 2016-08-15 00:28:42

解决方案3 -1 2016-08-14 16:56:46

解决方案1
2 2016-08-14 16:54:39

解决方案2
0 2016-08-15 00:28:42

解决方案3
-1 2016-08-14 16:56:46