CSS 選擇器(4):動態虛擬選擇器

康廷數位: CSS 選擇器(序)

P.S. 此範例IE不支援,請改用 Chorme 或是 Firefox

虛擬選擇器,並非針對特定元素進行樣式套用,而是針對處於某種狀態的元素進行動態樣式套用,以下方的三個文字方塊為例:

/class="pa"
/class="pa"
/class="pb"

文字方塊後方標示此元素的 class 屬性值。當滑鼠滑過任一個文字方塊時,背景顏色會變成淺灰色,從最上方的文字方塊開始,於第一個以及第二個文字方塊按下滑鼠左鍵會呈現綠色背景,放開則恢復原來的背景顏色,第三個文字方塊如果按一下,則會呈現紅色背景,直到這個文字方塊不再是駐點,才會恢復原來的顏色。

虛擬選擇器以冒號(:)為字首,此範例設定了三組虛擬選擇器,分別是 :hover 、:active 與 :focus ,列舉說明如下:
  • :hover - 滑鼠移動至元素時套用。
  • :active - 滑鼠點擊至元素時套用。
  • :focus - 元素獲得駐點時套用。
以下為相關的設定:

.pa:hover,.pb:hover {
background:gray;
}
.pa:active {
background:green;
}
.pb:focus {
background:red;
}

康廷數位: CSS 選擇器(序)


沒有留言: