className 依動作變化

source: React tutorial - CodeSandBox

hover時加className.png

設定 hover 為state 預設為 false
const [hover, setHover] = useState(false);

1. 原本的CSS樣式 .counter 放入變數 className

let className = 'counter'

<div className={className}>

2 . 當有hover 動作時， <div> 內的inline 事件監聽器 setHover(true)，state換成true

<div onPointerEnter={() => setHover(true)}>

3 . 判斷當state變數 hover 為 true 時，className變數加入字串(' 空格 hover')

if (hover) {
  className += ' hover'
}

4 . hover 動作取消時，<div> 內的inline 事件監聽器 setHover(false)，state換成false。

<div onPointerLeave={() => setHover(false)}>

React Event handler

These standard DOM props are also supported for all built-in components:

onPointerEnter：一個PointerEvent處理函式。

當 pointer 在元素內移動時觸發。
沒有捕獲階段capture phase。
相反，onPointerLeave和onPointerEnter從離開的元素 propagate 冒泡到進入的元素。

onPointerLeave：一個PointerEvent處理函式。

當 pointer 移動到元素外部時觸發。
沒有捕獲階段。相反，onPointerLeave和onPointerEnter從離開的元素propagate 冒泡到進入的元素。