我正在尝试使用简单的标题按钮，这些按钮在悬停时会改变颜色。我可能不小心使我的 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 中的颜色变化正在起作用。但是，如果它在您的系统上不起作用，我会尝试将 hover css 设置为 important 并检查结果是否符合预期:
a.hdrBtn:hover {
color: #ff0000 !important;
}
我还会检查控制台中的元素(例如 Chrome)以检查是否有其他类或样式覆盖了您的更改
此外，也许您正在尝试实现与您在此处解释的不同的东西。但是在你的情况下标签的颜色变化只会影响字体(不像它周围的盒子那样，因为你还没有创建一个)
关于html - 悬停过渡时的颜色变化不起作用(CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38944359/