我正在開發一個導航列系統，並想知道如何使子頁面更改，但原始頁面的標題仍然存在。 （我正在使用repl.it，提前告知）。
我還沒有在資料夾中放置任何內容。 我還希望當我懸停在具有“active”類別（灰色的那個）的項目上時，它不會改變顏色。
@import url('https://fonts.googleapis.com/css2?family=Roboto Mono:wght@700&display=swap'); html body{ background: #0E1212; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: none; font-family: 'Roboto Mono', monospace; } li { float: left; } li a { display: block; color: #DBDBDB; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { color: #682AE9; animation-name: example; animation-duration: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .active { color: #808080; } @keyframes example { 0% {color: #DBDBDB;} 100% {color: #622cd8;) } Home
回答你問題中關於保持激活類別在懸停時顏色不變的部分，我所做的就是創建了另一個
@keyframe，使得在0%和100%時它們都保持灰色。然後我使用transition: 0.5s;來使顏色變化的動畫過渡平滑。@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap'); html body { background: #0E1212; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: none; font-family: 'Roboto Mono', monospace; } li { float: left; } li a { display: block; color: #DBDBDB; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { color: #682AE9; transition: 0.5s; animation-name: example; animation-duration: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .active { color: #808080; } .active:hover { color: #808080; } @keyframes .active { 0% { color: #808080; } 100% { color: #808080; ) } @keyframes example { 0% { color: #DBDBDB; } 100% { color: #622cd8; ) }如你所見，當你懸停在第一個連結上（即啟動狀態），它仍然是灰色的，其他連結在
0.5s的時間內變為紫色。