如何在 React js 中悬停时在光标位置附近显示 div？

发布于 2025-01-17 22:35:26 字数 443 浏览 0 评论 0原文

我有两个文本项目，即item1和item2，以及一个内部有一些文本的div。我想默认将DIV保留，但是当我悬停在文本1或item2上时，将其显示在光标位置。请检查此链接中的示例gif动画

我在React中的jQuery代码中尝试了此链接。但是它会出现错误。

$(".text-item").mouseenter(function (e) {
  $(".box")
    .css({
      position: "absolute",
      right: e.pageX,
      top: e.pageY,
      display: "block",
    })
    .show();
});

原文

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();
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

智商已欠费 2025-01-24 22:35:26

试试这个：

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>
    )
  }

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>
    )
  }

回复收藏 0 原文

~没有更多了~