我想顯示一個導航欄并使用活動類突出顯示活動頁面。
<body> <header class="header">
<nav class="navbar">
<ul>
<li><a class="active" href="index.html">home</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
</body>
使用這種樣式，當鏈接懸停時，我可以看到顏色的變化，但在它處于活動狀態時看不到。
body {
background-color: black;
font-family: Lato, Helvetica, sans-serif;
color: white;
}
li a {
display: block;
color: white;
margin: 14px 16px;
padding: 2px;
text-decoration: none;
letter-spacing: 0.235px;
/* margin-right: 12px; */
}
li a:hover {
color: #EE6C4D;
/* font-weight: bold;
letter-spacing: 0; */
}
li a:active{
color: #EE6C4D;
}
uj5u.com熱心網友回復：
您需要使用a.active而不是a:active，因為active在您的代碼中是一個類而不是屬性。
另外，為了得到預期的結果，您最好使用不同的顏色進行測驗。
body {
background-color: black;
font-family: Lato, Helvetica, sans-serif;
color: white;
}
li a {
display: block;
color: white;
margin: 14px 16px;
padding: 2px;
text-decoration: none;
letter-spacing: 0.235px;
/* margin-right: 12px; */
}
li a:hover {
color: #EE6C4D !important;
/* font-weight: bold;
letter-spacing: 0; */
}
li a.active{
color: #0088CC;
}<body> <header class="header">
<nav class="navbar">
<ul>
<li><a class="active" href="index.html">home</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
</body>uj5u.com熱心網友回復：
因為你的css中并沒有真正的類.active
a:active與類不同：active
添加到您的 CSS：
.active{
color: #EE6C4D;
}
uj5u.com熱心網友回復：
根據我閱讀的參考資料， :active 選擇器可用于所有元素，而不僅僅是鏈接
有關主動選擇器的詳細資訊，請訪問此參考
對于我可以建議的解決方案，是重新制作您的選擇器
李一：主動
成為
li>a:活躍
原因很簡單，">"是子選擇器
“”是后代選擇器
不同之處在于后代可以是元素的子元素，也可以是元素的子元素的子元素，也可以是子元素的子元素的子元素。
希望對您有所幫助。謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/515386.html
標籤：htmlcss
上一篇：標簽元素寬度直到結束