CSS Li元素被選中通常意味著使用:hover偽類選擇器來改變鼠標懸停在列表元素上時的樣式。此外,CSS還提供其他偽類選擇器,例如:first-child和:last-child,可以選擇嵌套列表的第一個或最后一個列表元素。
ul li:hover { background-color: gray; color: white; } ul li:first-child { font-weight: bold; } ul li:last-child { font-style: italic; }
除此之外,列表元素也可以通過JavaScript和jQuery實現選中效果。例如,為每個列表元素添加點擊事件處理程序,并在被單擊時添加或刪除一個類(例如“selected”類),然后使用CSS樣式來定義選中效果樣式。
// jQuery示例代碼 $('ul li').click(function(){ $(this).toggleClass('selected'); }); .selected { background-color: gray; color: white; }
需要注意的是,CSS的:hover偽類選擇器只適用于電腦上的鼠標懸停事件,并不適用于移動設備上的觸摸事件。因此,在移動設備上實現列表元素選中效果需要使用JavaScript和jQuery等技術。
上一篇css li 選中樣式
下一篇css3地圖指示動畫