将鼠标悬停在图像上时显示文本数据 [React Functional Component]

Question

当我们在图像上 hover 时，我试图实现此功能以显示一些文本。

我为此使用功能组件。

所以这是我到现在为止所做的，但是

标签出现在图像本身上方，我希望在图像上方显示 hover 时显示。

至今：

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)}
 onMouseLeave={(e)=>onHoverOver(e)}>
{HoverData}
</p>
<Image
   alt=""
  src="Some Img Link"                                                                           
  className="img-responsive"
/>
</div>

所以显示是这样的，当我在图像上显示 hover 时，我可以在控制台中看到我在那里做了 hover。

当前场景的图像

任何帮助表示赞赏！ 问候

Answer 1

我建议使用 ANTD (ant design) 组件来达到你的目标。 使用tooltip组件文档： https://ant.design/components/tooltip/#header

Answer 2

当你 hover 在image上显示文本时，你应该在img标签上调用鼠标事件，如下所示。 同时将hover state 的数据类型更改为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)}
        onMouseLeave={(e) => onHoverOver(e)}
        alt=""
        src="some image link"
        className="img-responsive"
      />
    </div>
  );

请参考预览链接： https://codesandbox.io/s/image-hover-st3x3w?file=/src/App.js

Answer 3

你应该把 onMouseEnter 和 onMouseLeave 放在“img”标签上而不是“p”标签上