「按下」按鈕選擇器
當您想要在按下按鈕後改變其外觀時,傳統的:active 選擇器可能不夠。此選擇器僅在實體按住按鈕時觸發。
要實現所需的功能,另一個方法是利用 :target 偽類。當相應的錨點(在本例中為#btn)被定位時,該類別將啟動。
實作:
取代有 標籤的標籤:
<code class="html"><a id="btn" href="#btn">Button</a></code>
調整CSS 以合併:active 和:: target 偽類:
<code class="css">a { display: block; font-size: 18px; border: 2px solid gray; border-radius: 100px; width: 100px; height: 100px; text-align: center; line-height: 100px; } a:active { font-size: 18px; border: 2px solid green; border-radius: 100px; width: 100px; height: 100px; } a:target { font-size: 18px; border: 2px solid red; border-radius: 100px; width: 100px; height: 100px; }</code>
透過此實現,按鈕將首先出現處於正常狀態(白色)。單擊時,它將變為綠色(活動狀態)。放開按鈕後,會切換到紅色狀態(目標狀態)。
以上是如何使用 :target 偽類修改按鈕按下後的外觀?的詳細內容。更多資訊請關注PHP中文網其他相關文章!