當我們將滑鼠懸停在影像上時，我試圖實作此功能以顯示一些文本。
我為此使用功能組件。
所以這是我到現在為止所做的，但是
標簽出現在影像本身上方，我希望當我將滑鼠懸停在影像上時顯示。
迄今為止 ：
const [hover, setHover] = useState("nodisplay");
const HoverData = "Click or pinch to Zoom Image";
const onHover = (e) =>{
e.preventDefault()
setHover("displayed")
console.log("hovered")
}
const onHoverOver = (e) => {
e.preventDefault()
setHover("nodisplay")
}
<div className="flex_center py-5">
<p className={hover}
onMouseEnter={(e)=>onHover(e)}
onm ouseLeave={(e)=>onHoverOver(e)}>
{HoverData}
</p>
<Image
alt=""
src="Some Img Link"
className="img-responsive"
/>
</div>
所以顯示是這樣的，當我將滑鼠懸停在影像上時，我可以在控制臺中看到我確實懸停在那里。
當前場景的影像
任何幫助表示贊賞！問候
uj5u.com熱心網友回復：
由于您想在懸停時顯示文本，image因此應在標簽上呼叫滑鼠事件，img如下所示。hover還將狀態的資料型別更改為boolean.
const [hover, setHover] = useState(false); // initial false
const HoverData = "Click or pinch to Zoom Image";
const onHover = (e) => {
e.preventDefault();
setHover(true); // turn true
console.log("hovered");
};
const onHoverOver = (e) => {
e.preventDefault(); // turn false
setHover(false);
};
return (
<div className="flex_center py-5">
{/* if hover is true then only show the text */}
{hover && <p className={hover}>{HoverData}</p>}
<img
onMouseEnter={(e) => onHover(e)}
onm ouseLeave={(e) => onHoverOver(e)}
alt="將滑鼠懸停在影像上時顯示文本資料 [React 功能組件]"
src="some image link"
className="img-responsive"
/>
</div>
);
請參閱鏈接進行預覽：https ://codesandbox.io/s/image-hover-st3x3w?file=/src/App.js
uj5u.com熱心網友回復：
我建議使用 ANTD (ant design) 組件來達到你的目標。使用工具提示組件檔案：https ://ant.design/components/tooltip/#header
uj5u.com熱心網友回復：
你應該把 onm ouseEnter 和 onm ouseLeave 放在“img”標簽而不是“p”標簽上
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/457320.html
標籤：javascript 反应