【網頁設計】CSS｜Pseudo class效果｜:hover :active
在做網頁的時候，得注意有些自己設計成可互動的元件，也要讓使用者清楚知道可以互動，不然就喪失了其效果。舉最簡單的例子，就是超連結（Hyperlink），一般認知為藍色有底線的文字，移上去以後會改變顏色，點擊過的超連結也會顏色加深。 通常要讓人注意到一個元件可以互動， 靜態 上，能設計成如同常見的Button樣子，用 鮮明 顏色對比來呈現； 動態 上，則是讓使用者 不經意觸發 ，比方滑鼠移過去以後產生變色效果。 而這邊探討的就是動態的方式，會使用到CSS中的Pseudo class。 Pseudo Class Pseudo 代表 虛、偽 的意思，像有時在實作程式前，會先撰寫Pseudo Code，代表能呈現概念邏輯的語句，是虛的程式碼，不會實際以此編譯。而這裡的 Pseudo Class 代表不是真實的Class，是 添加的屬性 ，在畫面上看不到，必須當有動作發生在指定的Tag/Class/id（或不指定表全部）才會套用到效果，寫法以 冒號 跟隨。Pseudo Class包含下列幾項代表用字： :hover ：滑鼠游移於上方 :focus ：Tab選擇到的物件 :active ：滑鼠或Enter點擊剎那（或手機板的點開中） :target ：被選擇的區塊，內容放置的代表針對被選擇的id做事。（#id:target） 通常可搭配display（none/block）來使資料顯示與否 https://www.w3schools.com/cssref/sel_target.asp 搭配燈箱效果（常用於廣告或Cookie顯示） https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal 要在這些游移、點擊、選擇後做什麼動作，可以輔以在{}添加內容，像是常用顏色（color、grayscale）、透明度（opacity）、 動畫（animation） 、縮放（Scale）來區辨使用者有執行上面那些pseudo class的動作。 實作例子 [在widget上，以hover, active搭配opacity] 以自己的Blogger為例，在文章頁面最下方，可以看見Archive的區塊，我設定了透明度，當hover或點擊選中...