javascript 在React.js中使用onMouseOver和onMouseOut时保持div可见以进行交互

o8x7eapl  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(150)

我在我的网站上购物车工作,当你悬停时,它应该显示另一个div就在父级下面(绝对位置)。父对象有position: relative,我要显示的div在他的内部,有position: absolute;
我就是这样做的,但我的问题是,当我试图在div上移动鼠标时,它会消失,onMouseOut被调用,当你悬停图标时,它似乎也有一点小故障(它显示然后隐藏,然后再次显示)。
我该怎么解决?
产品编号:https://codesandbox.io/s/nifty-wiles-obqkmz

zlhcx6iw

zlhcx6iw1#

您不需要使用if条件来检查状态。这个很好用。

import "./styles.css";
import { useState } from "react";
import { MyComponent } from "./MyComponent";

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <div className="App">
      <div
        className="parent"
        onMouseOver={() => setShow(true)}
        onMouseOut={() => setShow(false)}
      >
        <div className="cartIcon">
          <i class="material-symbols-outlined">shopping_cart</i>
        </div>
        {show && <MyComponent />}
      </div>
    </div>
  );
}
xlpyo6sf

xlpyo6sf2#

使用onMouseLeave代替onMouseOut

bweufnob

bweufnob3#

你只需要更新你的代码来使用onMouseEnter和onMouseLeave。

相关问题