I have two Text Items, item1 and item2, and a div with some text inside. I want to keep the div hidden by default but show it at cursor position when I hover on Text item1 or item2. Please check the sample GIF animation in this Link
I tried this in Jquery code inside React. But it gives error.
$(".text-item").mouseenter(function (e) {
$(".box")
.css({
position: "absolute",
right: e.pageX,
top: e.pageY,
display: "block",
})
.show();
});
Try this:
import {useState, Fragment} from react;
const [visible, setVisible] = useState(false)
const MyApp = ()=> {
return (
<Fragment> {
visible &&
<div className="hiddenContainer>
<p>Your hidden text</p>
</div>
}
</Fragment>
<p onMouseEnter={()=>setVisible(!visible)}>Item 1</p>
<p onMouseEnter={()=>setVisible(!visible)}>Item 2</p>
)
}