阿嬤都看得懂的 CSS 微互動元件

今天我們要來做動態繪本！
https://www.youtube.com/embed/xbzVGjzF1UM

什麼，一下就要這麼進階嗎？呃嗯，其實還好。仔細想想，其實這些動態繪本，都有個固定的模式，那就是讀者做某個動作以後就會觸發另個動作。例如，讀者拉動某個拉桿以後，某張卡片就會開始移動；讀者翻開某個卡片以後，就會看見某個原本隱藏的卡片。

這些互動，在網頁上會是像怎麼樣呢？可能會是滑過某個區塊元素的時候，某個區塊元素開始移動，或者點選某個區塊元素後，浮現出某個文字段落。簡單地說，這些互動分作 2 個部分：

1. 使用者作了某個動作；
2. 網頁發生改變。

讓我們先想想那些改變是怎麼發生的。當我們想要讓某個區塊元素移動，我們會做的事情，是改變這個區塊元素的位置。當我們想要讓某個文字段落浮現，我們會做的事情，是先讓那個文字段落隱藏起來，然後再讓這個文字段落變成可見的。

更動位置比較簡單，例如我們可以調整

1. margin 外距；
2. 將 position 設為 relative 或 absolute 以後，可以使用 top/ right/ bottom/ left 來移動位置。

更動某個元素從可見變成不可見的方法有 3 種：

1. 設定 visibility 屬性：常見的值有 visible 和 hidden 兩種，可以把元素顯示或隱藏。值得注意的是，無論顯示或隱藏，這個元素都還是佔據版面的喔！
2. 設定 display 屬性：設定為 none 就整個元件消失，所以消失後也不占版面。其他值就看前面的介紹囉！
3. 設定 opacity 屬性：這是元件的透明程度，值為 0 到 100 間，越小越透明。因此，只要把 opacity 設為 0，視覺效果就會像是隱藏起來了！

那麼，我們要怎麼知道使用者的滑鼠點到什麼元件呢？或者，用比較炫炮的方式說，我們要怎麼**「監聽」(listen)** 使用者滑鼠點擊的動作呢？還記得我們前幾天介紹的偽類選擇器嗎？我們同樣可以把滑鼠移上或滑鼠點選的元素，當作某個偽類，並且改變這些元素的屬性。例如，

• :hover 就是用來表示滑鼠移上的那類元素；而
• :active 就是用來表示滑鼠點擊的那類元素；另外，
• focus 就是用來表示滑鼠選中的那類元素。

因此，現在我們可以

1. 使用偽類來得知使用者的一些動作，以及
2. 在這個偽類中，使用其他樣式來做出改變。
   這個公式在 .css 檔案中看起來會像這樣：

類別:使用者動作{
	屬性: 值;
}

注意，如果是想正好選到那個類別半形冒號前面不能有空格，想想看為什麼呢？可以看看前兩天對於類別組合選擇器的討論。空格在類別組合的選擇器當中，是有意義的喔。

例如，在前幾天的貼紙簿練習中，我們可以把粉紅貼紙另外加上偽類：

.pink:hover{
  background-color: red;
}
.pink:focus{
  background-color: brown;
}

我們就會發現滑鼠移上去以後，粉紅貼紙變成紅色；不過，為什麼我們滑鼠怎麼點擊都沒有效果呢？這是因為區塊元素不像核取方塊、或按鈕，預設就可以被選中。想要讓元素能夠被選中，必須在那個元素的 HTML 標籤中，另外寫上 tabindex = "-1"，看起來會像這樣：

<div class="banner pink" tabindex="-1">
  <p>粉紅貼紙</p>
</div>

這時候，我們就可以發現，粉紅貼紙被點擊時，變成咖啡色；點擊網頁其他地方時，就又變回粉紅色囉！

那麼，讓我們來玩個組合魔術。如果我想讓所有黃色貼紙，在滑鼠移上橘色貼紙以後就變成金色，該怎麼辦呢？

沒錯，上面這個使用者動作的對象元件，和產生樣式改變的元件，並不是同個元件。因此，我們沒辦法只寫

.yellow:hover{
  background-color: gold;
}

否則，只有當滑鼠移到黃色貼紙上時，黃色貼紙才會變成金色。當滑鼠移到橘色貼紙上時，黃色貼紙可是完全沒有反應喔！

因此，我們必須把滑鼠移上橘色貼紙這件事情寫出來，但是實際發生樣式改變的元件是黃色貼紙。這件事情乍看有點困難，不過，我們仔細觀察這兩個元件後會發現：橘色貼紙是黃色貼紙的父元素。因此，我們可以使用組合選擇器，只挑出滑鼠移上的橘色貼紙當中的黃色貼紙，並且讓這些貼紙進行樣式改變。實際上寫起來會像這樣：

.orange:hover .yellow{
  background-color: gold;
}

那麼，如果我們想要讓黃色貼紙在滑鼠移上時消失，應該怎麼辦呢？我們剛剛學過 2 種讓元件消失的方式。讓我們先來試試看 display：

.yellow:focus{
  display: none;
}

黃色貼紙確實在滑鼠移上後消失了，不過後面的貼紙就會跟著移動很煩，所以使用 display 就不是個太好的策略。這時候，我們就可以使用前面提到的 visibility 這個屬性：

.yellow:hover{
  visibility: hidden;
}

那麼，如果我們想要讓黃色貼紙在滑鼠選中後消失，應該怎麼辦呢？讓我們先把黃色貼紙都先加上 tabindex，然後使用前面提到的 visibility 這個屬性：

.yellow:hover{
  visibility: hidden;
}

我們會發現，儘管點擊黃色貼紙時，貼紙瞬間消失了，但是立刻又出現了！這是因為 display: none 與 visibility: hidden 的元素都無法被選中。因此，我們必須使用上面說到的第三種方法，也就是把 opacity 設為 0：

.yellow:focus{
  opacity: 0;
}

這樣就可以讓黃色貼紙在被點擊時消失囉！

底下是今天介紹的動態貼紙簿源碼，各位阿嬤可以自己 fork 回家玩玩喔！
https://codepen.io/LogosChen/pen/oNwJPBL

今天我們介紹了怎麼使用 CSS 寫出微互動元件，不過有些阿嬤可能會覺得這個做法很侷限：

1. 只有使用者動作的目標對象就是改變樣式的元素，或者目標對象和改變樣式的元素間具備層級關係時，才能夠實現這個微互動；
2. 監聽使用者動作的方法很侷限，只有少數的滑鼠動作。

例如，我們沒辦法在使用者輸入某些字詞的時候，網頁上就做出相應的改變；這當然會大幅侷限我們希望達成的效果。因此，只使用 HTML 和 CSS，在網頁設計上還是無法達成細緻的互動。所以，我們明天開始，就要引入重要的互動腳本，也就是我們的 JavaScript 囉！

想一想：如果我們是想讓黃色貼紙一開始隱藏，只有被點擊的時候才出現，又應該怎麼做呢？