我希望此按鈕boxShadow僅顯示在Hover. 怎么做 ？
按鈕代碼：
<CButton
style={{
float: 'right',
marginBottom: '15px',
marginRight: '30px',
backgroundColor: '#06ac06',
border: 'none',
boxShadow: '0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)',
}}
</CButton>
uj5u.com熱心網友回復：
像這樣的偽類:hover不能作為行內樣式使用。您可以通過 React state onMouseEnter和onMouseLeave偵聽器在 JS 中實作懸停行為（然后box-shadow根據 設定值state）。但正如您所見，這種方法需要太多樣板檔案。我建議使用 CSS-in-JS 庫，如 styled-components、實用程式類如 Tailwind 或 SCSS。
試試這個代碼：https ://codesandbox.io/s/kind-morning-s5sh64?file=/src/App.js
const [isHover, setIsHover] = useState(false)
//...
<CButton
onm ouseEnter={() => setIsHover(true)}
onm ouseLeave={() => setIsHover(false)}
style={{
float: 'right',
marginBottom: '15px',
marginRight: '30px',
backgroundColor: '#06ac06',
border: 'none',
transition: 'box-shadow .3s', //added for Smouth transition
boxShadow: `5px 5px 18px -3px rgba(0,0,0,${isHover ? 0.27 : 0})`,
}}
>
</CButton>
```
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513951.html
標籤：反应按钮