悬停过渡时的颜色变化不起作用（CSS）

时间：2016-08-14 16:45:13

标签： html css colors hover css-transitions

我正在尝试使用简单的标题按钮，当它们悬停时会改变颜色。我可能不小心弄错了我的CSS，因为我原本做了不同的事情。无论如何，即使有重要的，颜色过渡也不起作用。注意：关于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>

3 个答案:

答案 0 :(得分：2)

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

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

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

另外，也许你正在努力实现与此处所解释的不同的东西。但是标签的颜色变化会在你的情况下只影响字体（不像是一个圆形左右的盒子，因为你还没有创建过它）

答案 1 :(得分：0)

在此课程（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;

答案 2 :(得分：-1)

您需要在CSS代码中删除标题导航*并更改为标题导航：悬停

完整代码：

编辑CSS＆amp; 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>

相关问题
最新问题