如何在 React 中設置懸停樣式
簡介
使用視覺效果是保持界面交互和吸引用戶注意力的絕佳方式。在我們的屏幕上設置動畫對象可以創造獨特的體驗並增加交互性。
Hover 是一個偽類，它只允許我們添加特定樣式以使用戶知道他們的鼠標何時打開和關閉特定元素。對於本文，我們將使用一個框：
const App = () => {
return (
<div>
<div className="box">
<p>Hover me!</p>
</div>
</div>
);
};
具有以下基本樣式：
.box {
height: 200px;
width: 200px;
background-color: rgb(0, 191, 255);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
}
本質上，我們將背景顏色更改為 lightblue 當鼠標懸停在盒子上時，然後在鼠標移開時將其恢復為默認樣式。
如何在 React 中設置懸停樣式
有兩種方法：外部和內聯。外部涉及擁有一個單獨的 CSS 文件，可以輕鬆設置懸停樣式，而內聯樣式不允許我們使用偽類設置樣式，但我們將在本文中學習如何使用鼠標事件在內聯 CSS 中設置懸停樣式。
如何在 React 中使用 CSS 外部樣式設置懸停樣式
這與 HTML 和 CSS 的工作方式非常相似；我們所要做的就是給元素一個 className （不是 class ) 或使用標籤作為我們要定位的選擇器，然後設置懸停偽類的樣式：
.box {
height: 200px;
width: 200px;
background-color: rgb(0, 191, 255);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
}
.box:hover {
background-color: lightblue;
}
我們所做的只是添加 :hover 將偽類添加到先前樣式的選擇器中，並在鼠標懸停在元素上時更改我們想要更改的任何屬性。
如何使用內聯樣式在 React 中設置懸停樣式
通過內聯樣式，我們的意思是通過元素的標籤進行樣式化，這是通過 style 完成的 屬性。如果我們要將前面的代碼轉換為內聯樣式：
const App = () => {
return (
<div>
<div
style={{
height: '200px',
width: '200px',
backgroundColor: 'rgb(0, 191, 255)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '30px',
cursor: 'pointer',
}}
>
<p>Hover me!</p>
</div>
</div>
);
};
在我們的 App 中重複這樣的樣式可能會讓人難以閱讀，因此如果我們只是在頁面上設置單個對象的樣式，我們可以創建一個樣式對象，而無需為其創建文件：
const App = () => {
const boxStyle = {
height: '200px',
width: '200px',
backgroundColor: 'rgb(0, 191, 255)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '30px',
cursor: 'pointer',
};
return (
<div>
<div style={boxStyle}>
<p>Hover me!</p>
</div>
</div>
);
};
到目前為止，我們已經構建了我們的盒子。為了在 React 中使用內聯 CSS 設置懸停樣式，我們使用狀態以及 onMouseEnter 有條件地設置內聯樣式 和 onMouseLeave props，它告訴我們鼠標什麼時候在元素上，什麼時候不在：
import { useState } from 'react';
const App = () => {
const [isHover, setIsHover] = useState(false);
const handleMouseEnter = () => {
setIsHover(true);
};
const handleMouseLeave = () => {
setIsHover(false);
};
const boxStyle = {
<!-- ... -->
};
return (
<div>
<div
style={boxStyle}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<p>Hover me!</p>
</div>
</div>
);
};
此時，我們可以使用 *isHover* 有條件地設置任何屬性的樣式 狀態：
const boxStyle = {
//...
backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};
到目前為止，我們已經看到瞭如何實現它。現在，讓我們分解我們的代碼並解釋為什麼我們使用我們所做的語法。我們首先創建一個狀態，該狀態存儲一個布爾值，指示何時發生懸停（true ) 否則（默認設置為 false ):
const [isHover, setIsHover] = useState(false);
然後我們還在 div 中添加了兩個事件來幫助改變我們的狀態並知道鼠標何時在盒子上以及何時離開盒子：
<div
style={boxStyle}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<p>Hover me!</p>
</div>
onMouseEnter 當鼠標進入元素時觸發事件，而 onMouseLeave 離開時觸發事件。我們為這些事件中的每一個都分配了一個函數，現在我們用它來改變狀態：
const handleMouseEnter = () => {
setIsHover(true);
};
const handleMouseLeave = () => {
setIsHover(false);
};
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
我們設置 state 在基於觸發事件的每個函數中。最後，我們可以使用狀態來有條件地設置框的樣式，而不僅僅是 backgroundColor , 也適用於任何其他風格：
const boxStyle = {
//...
backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
color: isHover ? 'red' : 'green',
};
當我們把所有這些放在一起時，我們現在可以使用內聯樣式在 React 中設置懸停樣式：
import { useState } from 'react';
const App = () => {
const [isHover, setIsHover] = useState(false);
const handleMouseEnter = () => {
setIsHover(true);
};
const handleMouseLeave = () => {
setIsHover(false);
};
const boxStyle = {
height: '200px',
width: '200px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '30px',
cursor: 'pointer',
backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
color: isHover ? 'red' : 'green',
};
return (
<div>
<div
style={boxStyle}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<p>Hover me!</p>
</div>
</div>
);
};
export default App;
結論
我們在本文中學習瞭如何使用外部樣式和內聯樣式在 React 中設置懸停樣式。雖然不推薦使用內聯樣式，但如果系統提示我們使用它，了解它的工作原理會很有用。
