CSS可以實現點擊哪個亮哪個的效果,這種效果可以通過CSS偽類實現。例如我們可以使用:hover偽類實現鼠標懸停時高亮文本的效果,還可以使用:checked偽類實現選中復選框或單選按鈕時高亮文本的效果。
/* 高亮選中的單選按鈕 */ input[type="radio"]:checked + label { background-color: #fff; color: #000; } /* 高亮選中的復選框 */ input[type="checkbox"]:checked + label { background-color: #fff; color: #000; }
在上面的代碼中,我們使用了:checked偽類和+選擇器將選中的單選按鈕或復選框的下一個兄弟元素的文本高亮顯示。我們也可以將這種效果應用到其他元素,如按鈕、超鏈接等。
除了使用偽類,我們也可以使用JavaScript來實現點擊哪個高亮哪個的效果。我們可以監聽元素的點擊事件,當元素被點擊時,我們可以將其添加一個高亮的CSS類,而其他沒被點擊的元素則移除該CSS類。
$(".my-button").click(function() { $(".my-button").removeClass("active"); $(this).addClass("active"); });
上面的代碼使用了jQuery來監聽點擊事件,并通過addClass和removeClass方法添加或移除CSS類。我們也可以使用原生JavaScript來實現類似的效果,但需要編寫更多的代碼。
無論使用CSS還是JavaScript,實現點擊哪個亮哪個的效果都是很簡單的。這種效果可以幫助我們提升用戶體驗,讓頁面更加互動和友好。
上一篇css實現水平居中方法
下一篇css實現梯形標簽