【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 選擇器(序)


沒有留言: