i was trying to implement this functionality to display some text when we hover over an Image.

I am using functional Component for this.

so heres what i did until now but the

tag is appearing above the image itself , i wanted that to display when i hover over the image .

So far :

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

so the display is something like this , when i hover on the image i can see in console that i did hover there.

Image for current scenario

Any help is appreciated! Regards

CodePudding user response：

As you want to show text when you hover over image you should call mouse events on img tag as follows. Also change data type of hover state to 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
        onm ouseEnter={(e) => onHover(e)}
        onm ouseLeave={(e) => onHoverOver(e)}
        alt=""
        src="some image link"
        className="img-responsive"
      />
    </div>
  );

Refer the link for preview: https://codesandbox.io/s/image-hover-st3x3w?file=/src/App.js

CodePudding user response：

I suggest to use ANTD (ant design) component to reach your goal. Use tooltip component doc: https://ant.design/components/tooltip/#header

CodePudding user response：

you should put onm ouseEnter and onm ouseLeave on the "img" tag not on "p" tag