虛擬類別選擇器 ( 使用者操作行為 )

使用者在瀏覽網頁時，往往會有點擊、懸停之類的操作行為，CSS 也有專門針對這些操作行為的虛擬類別選擇器，例如 :hover、:active、:focus、:focus-visible、:focus-within 等等，只要元素狀態因操作行為發生改變，就能透過這些虛擬類別選擇器套用對應的樣式，這篇教學會介紹如何使用「使用者操作行為」的虛擬類別選擇器。

「使用者操作行為」虛擬類別選擇器

下方列出和「使用者操作行為」有關的虛擬類別選擇器 ( 支援度 All 表示主流瀏覽器都支援 )：

:hover

「:hover」表示「滑鼠懸停在某個元素上」，通常會搭配「超連結」相關的虛擬類別選擇器，或與「指定元素名稱」一同使用，下方的範例執行後，滑鼠移動到 a 元素上方，a 元素就會改變文字和背景顏色。

線上展示：https://codepen.io/oxxo/pen/eYaZRqg

<!-- HTML 程式碼 -->
<nav>
  <a>oxxo</a>
  <a>apple</a>
  <a>banana</a>
  <a>orange</a>
</nav>

<!-- CSS 程式碼 -->
<style>
  a:hover {
    background: blue; 
    color:white;
  }
</style>

:hover 常與一些互動效果有關，例如滑鼠懸停在某個選項後展開子選單、出現提示訊息....等，下方的範例執行後，當滑鼠移動到 a 上方，會顯示原本預設隱藏的 ul 元素。

注意，:hover 主要針對「滑鼠」的懸停行為，下方兩種狀況需要改用其他虛擬類別選擇器：

• 鍵盤切換焦點操作：使用 :focus。
• 行動裝置觸控互動效果：使用 :active。

線上展示：https://codepen.io/oxxo/pen/OJYNjPe

<!-- HTML 程式碼 -->
<nav>
  <a>oxxo
    <ul>
      <li>oxxo.studio</li>
      <li>STEAM 教育學習網</li>
      <li>oxxo's blog</li>
    </ul>
  </a>
  <a>apple</a>
  <a>banana</a>
  <a>orange</a>
</nav>

<!-- CSS 程式碼 -->
<style>
  a {position: relative;}
  a ul {
    display: none;          /* 隱藏 ul */
    position: absolute;
    border: 1px solid #000;
    color: #000;
  }
  a:hover {
    background: blue; 
    color: white;
  }
  a:hover ul {display: block;}  /* 顯示 ul */
</style>

:active

「:active」表示「某個元素處在被點擊的狀態」，通常會搭配「超連結」相關的虛擬類別選擇器，或與「指定元素名稱」一同使用，下方的範例執行後，只要是「正在被滑鼠點擊」的 li，就會變成藍底白字的樣式，放開滑鼠後又會回到原本的樣式。

因爲「行動裝置」沒有「滑鼠懸停」的行為，因此常使用 :active 選擇器顯示「行動裝置的觸控點擊」效果。

線上展示：https://codepen.io/oxxo/pen/QWRNMaG

<!-- HTML 程式碼 -->
<ul>
  <li>oxxo</li>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  li:active {
    background: blue;
    color: white;
  }
</style>

:focus

「:focus」表示「某個元素處在焦點狀態」，所謂的「焦點狀態」，表示使用者的鍵盤游標 ( 不是滑鼠 ) 正在這個元素之上，因此這個選擇器除了搭配「超連結」相關的虛擬類別選擇器，幾乎都與「輸入」相關元素有關，因此許多無障礙網頁使用的「鍵盤切換超連結」或「鍵盤展開選單」的功能，也都會搭配 :focus 選擇器。

下方的範例執行後，只要是「處在焦點狀態」的 a，除了會出現「瀏覽器標示焦點的外框」，還會變成藍底白字的樣式並展開藏的 ul 選單，然而範例同時也支援 :hover 選擇器，可以使用滑鼠開啟選單，如果要觀察效果，可以開啟線上展示網頁，用鍵盤 tab 鍵切換選單 ( 按下 tab 鍵時，焦點會先切換到 input 元素 )。

使用 outline:none; 的樣式屬性，可以移除瀏覽器標示焦點的外框。

線上展示：https://codepen.io/oxxo/pen/bGyprPq

<!-- HTML 程式碼 -->
<form>
  <input type="text">
  <br/>
  <input type="text">
</form>
<nav>
  <a href="#">oxxo
    <ul>
      <li>oxxo.studio</li>
      <li>STEAM 教育學習網</li>
      <li>oxxo's blog</li>
    </ul>
  </a>
  <a href="#">apple</a>
  <a href="#">banana</a>
  <a href="#">orange</a>
</nav>

<!-- CSS 程式碼 -->
<style>
  a {position: relative;}
  a ul {
    display: none;     /* 隱藏 ul 子選單 */
    position: absolute;
    border: 1px solid #000;
    color: #000;
  }
  a:hover, a:focus {
    background: blue;  /* 成為焦點或滑鼠點擊時變色 */
    color: white;
  }
  a:hover ul, a:focus ul{
    display: block;    /* 成為焦點或滑鼠懸停時，顯示 ul 子選單 */
  }
</style>

:focus 預設只能作用在輸入元素或超連結元素，但如果替元素加入「tabindex="0"」的屬性，就能讓該元素也支援 :focus 選擇器，下方範例執行後，使用滑鼠點擊或鍵盤 tab 切換焦點，可以發現焦點會切換到有加上 tabindex="0" 的元素，沒有加上屬性的元素則不會被焦點鎖定。

線上展示：https://codepen.io/oxxo/pen/pomyWRK

<!-- HTML 程式碼 -->
<ul>
  <li tabindex="0">oxxo</li>    <!-- 滑鼠點擊或鍵盤 tab 切換會出現樣式 -->
  <li>apple</li>
  <li>banana</li>
  <li tabindex="0">orange</li>  <!-- 滑鼠點擊或鍵盤 tab 切換會出現樣式 -->
</ul>

<!-- CSS 程式碼 -->
<style>
  li:focus {
    background: blue; 
    color: white;
  }
</style>

:focus-visible

「:focus-visible」表示「某個元素處在明確焦點狀態」，「明確焦點狀態」主要針對「button 元素」和「有 tabindex="0" 的元素」，通常使用 :focus 選擇器之後，這兩種類型的元素在滑鼠點擊和鍵盤 Tab 切換焦點時，都會套用同樣的樣式，但如果使用 :focus-visible，就能明顯區隔是滑鼠點擊還是鍵盤 Tab 切換焦點。

下方的範例執行後，如果使用滑鼠點擊上半部的元素，周圍會出現成為焦點的外框，點擊下半部的元素則不會出現外框，但如果使用鍵盤 Tab 切換，則全部都會有成為焦點的外框。

使用 outline 樣式屬性，可以移除或修改瀏覽器標示焦點的外框。

線上展示：https://codepen.io/oxxo/pen/QWRNqqm

<!-- HTML 程式碼 -->
<button>滑鼠點擊有外框，鍵盤切換有外框</button>
<ul>
  <li tabindex="0">oxxo</li>
  <li tabindex="0">apple</li>
  <li tabindex="0">banana</li>
  <li tabindex="0">orange</li>
</ul>

<button class="b">滑鼠點擊「沒有」外框，鍵盤切換有外框</button>
<ul class="b">
  <li tabindex="0">oxxo</li>
  <li tabindex="0">apple</li>
  <li tabindex="0">banana</li>
  <li tabindex="0">orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  button:focus, li:focus {
    outline: 2px solid red;
    color: red;
  }
  .b:focus, .b li:focus {
    outline: none;
  }
  .b:focus-visible, .b li:focus-visible {
    outline: 2px solid red;    /* 鍵盤切換焦點時，才會出現外框 */
  } 
</style>

:focus-within

「:focus-within」表示「某個元素的子元素，處在焦點狀態」，例如下方的範例，Class 為 a 的 li 套用了 :focus-within 選擇器，這時如果它的子元素 span 處於焦點狀態，則這個 li 就會按照指定樣式變色，但其他的 li 因為沒有套用 :focus-within 選擇器，就只有 span 本身變色。

線上展示：https://codepen.io/oxxo/pen/dyEMZPv

<!-- HTML 程式碼 -->
<ul>
  <li class="a"><span tabindex="0">oxxo</span></li>
  <li><span tabindex="0">apple</span></li>
  <li><span tabindex="0">banana</span></li>
  <li><span tabindex="0">orange</span></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  li {width: 200px;}
  span:focus {background: red;}
  .a:focus-within {
    background: gray;
    border: 1px solid red;
  }
</style>

小結

當網頁需要「和使用者互動」時，絕對少不了「使用者操作行為」虛擬類別選擇器，雖然通常 :hover 可以滿足大多數的狀況，但其他的選擇器卻能輔助設計，減少需要大量 CSS 或使用 JavaScript 才能處理的細節效果。

• W3C 官方參考：https://www.w3.org/TR/2018/SPSD-html5-20180327/disabled-elements.html
• MDN 文件參考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～