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

o8x7eapl 于 2023-05-27 发布在 Java

关注(0)|答案(3)|浏览(151)

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

JavaScript

来源：https://stackoverflow.com/questions/76340350/keep-div-visible-to-interact-when-using-onmouseover-and-onmouseout-in-react-js

3条答案

按热度按时间

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

赞(0）回复(0）举报 2023-05-27

xlpyo6sf2#

使用onMouseLeave代替onMouseOut

赞(0）回复(0）举报 2023-05-27

bweufnob3#

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

赞(0）回复(0）举报 2023-05-27