0
色を変更したときに色が変化する単純なヘッダーボタンを使用しようとしています。もともと私は何か違うことをしていたので、誤って私のCSSを複雑にするかもしれません。それにかかわらず、重要な場合でも、色の変化は機能しません。注：line-heightとheader.smallerについてのすべてのものは、圧縮されたヘッダにはまだ使用されていますが、これはコードには含まれていません（削除しないでください）。ありがとう！ （また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：
<!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>
それはここで働いているようだ：へhttps://jsfiddle.net/674svcpa/ ありえない色の変化あなたは何をしたいと思ったのですか？ – Tom