The latest articles on DEV Community by Naeem Rind (@naeemrind). https://dev.to/naeemrind https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F839849%2F3911f89f-14f0-4524-b9ed-74611ecca786.jpeg https://dev.to/naeemrind en Naeem Rind Thu, 31 Mar 2022 08:59:09 +0000 https://dev.to/naeemrind/how-to-show-a-div-near-cursor-position-on-hover-in-react-js-454 https://dev.to/naeemrind/how-to-show-a-div-near-cursor-position-on-hover-in-react-js-454 <p>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: <a href="https://i.stack.imgur.com/e4lpB.gif">https://i.stack.imgur.com/e4lpB.gif</a></p> <p>I tried this in Jquery code inside React. But it gives error.</p> <p><code>$(".text-item").mouseenter(function (e) {<br> $(".box")<br> .css({<br> position: "absolute",<br> right: e.pageX,<br> top: e.pageY,<br> display: "block",<br> })<br> .show();<br> });</code></p> react hover javascript webdev