悬停过渡时的颜色更改不起作用 (CSS)

我试图有简单的标题按钮改变颜色时，他们悬停在。我可能不小心把我的CSS弄得太复杂了，因为我最初做的是不同的事情。无论如何，即使有一个重要的，颜色过渡不起作用。注意:所有关于行高和页眉的东西。更小的仍然被用于收缩头，我没有包括在代码中(所以请不要删除它们)。谢谢!参见下面的代码(也在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中的颜色更改正在工作。如果它不能在您的系统上工作，但是，我会尝试将悬停css设置为重要，并检查结果是否如预期的那样:

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

我也会检查元素在控制台(例如Chrome)检查是否有其他类或样式覆盖你的更改

同样，也许你正在尝试实现一些不同于你在这里解释的东西。但是在您的例子中，标签的颜色变化只影响字体(不像它周围的框，因为您还没有创建一个)

在这个类(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;

你需要在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>

相关内容

最新更新

热门标签：