【網頁設計】CSS｜Pseudo class效果｜:hover :active
在做網頁的時候，得注意有些自己設計成可互動的元件，也要讓使用者清楚知道可以互動，不然就喪失了其效果。舉最簡單的例子，就是超連結（Hyperlink），一般認知為藍色有底線的文字，移上去以後會改變顏色，點擊過的超連結也會顏色加深。
通常要讓人注意到一個元件可以互動，靜態上，能設計成如同常見的Button樣子，用鮮明顏色對比來呈現；動態上，則是讓使用者不經意觸發，比方滑鼠移過去以後產生變色效果。
而這邊探討的就是動態的方式，會使用到CSS中的Pseudo class。
要在這些游移、點擊、選擇後做什麼動作，可以輔以在{}添加內容，像是常用顏色（color、grayscale）、透明度（opacity）、動畫（animation）、縮放（Scale）來區辨使用者有執行上面那些pseudo class的動作。
以自己的Blogger為例，在文章頁面最下方，可以看見Archive的區塊，我設定了透明度，當hover或點擊選中後，會提高opacity。在DevTools中觀察目標物件的Class（透過CSS Selector來選擇準確的物件），再到主題>自訂>進階>新增CSS的部分加入樣式即完成簡單的應用。
值得注意的是這裡採用CSS Selector，只針對取得「main」這個Tag下的Class「BlogArchive」來偵測hover或active的動作，透過逗點隔開後完整寫清楚。（其他部分的BlogArchive則不會套用到效果，這就是Selector的意涵，也是CSS稱為階層樣式表的主要特點，能層層篩選。）
若以為能精簡寫成上面這樣，會造成在手機板上長按時出現bug。
因此，若經逗點分隔多個項目，仍需盡量寫清楚，可以避免錯誤。
Animation是讓畫面轉換更順暢的手法，也是產生動態視覺的醒目提示；
CSS Selector則能讓我們能準確篩選目標物。之後我會針對animation及css selector來撰文。
通常要讓人注意到一個元件可以互動，靜態上，能設計成如同常見的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或點擊選中後，會提高opacity。在DevTools中觀察目標物件的Class（透過CSS Selector來選擇準確的物件），再到主題>自訂>進階>新增CSS的部分加入樣式即完成簡單的應用。
main .BlogArchive{
background-color: whitesmoke;
opacity: 0.7;
}
main .BlogArchive:hover,
main .BlogArchive:active{
opacity: 0.9;
}
值得注意的是這裡採用CSS Selector，只針對取得「main」這個Tag下的Class「BlogArchive」來偵測hover或active的動作，透過逗點隔開後完整寫清楚。（其他部分的BlogArchive則不會套用到效果，這就是Selector的意涵，也是CSS稱為階層樣式表的主要特點，能層層篩選。）
main .BlogArchive:hover, :active若以為能精簡寫成上面這樣，會造成在手機板上長按時出現bug。
因此，若經逗點分隔多個項目，仍需盡量寫清楚，可以避免錯誤。
Animation是讓畫面轉換更順暢的手法，也是產生動態視覺的醒目提示；
CSS Selector則能讓我們能準確篩選目標物。之後我會針對animation及css selector來撰文。
留言