https://codesandbox.io/s/mmk8w39l49
这是我使用OnMouseOver
有父框(Card.jsx,天蓝色框)和子框(Container.jsx黄色框),它们具有鼠标悬停,鼠标按下,鼠标移出,并且每个框都有菜单栏,如果悬停弹出真实菜单栏但是当我将鼠标悬停在框上之后,每当我将鼠标悬停在菜单栏上时,就会发生一些错误(父鼠标悬停和菜单栏鼠标悬停发生3次)
当我将鼠标悬停在菜单栏上时,我不想跳出框框
也许
{this.state.hover || this.state.active ? (
<div>
{this.state.toolHover ? (
<div
onMouseOut={this.handleOnMouseOutTool}
style={{
...toolStyle,
transition: "opacity 0.5s ease",
opacity: this.state.toolHover ? "1" : "0"
}}
>
<button
style={{
...buttonStyle,
borderTopLeftRadius: "100%",
borderBottomLeftRadius: "100%"
}}
/>
<button style={buttonStyle} />
<button style={buttonStyle} />
</div>
) : (
<div
onMouseOver={this.handleOnMouseOverTool}
style={{
...handleStyle
}}
/>
)}
</div>
) : null}
这种风格的代码会出错,但是我不知道如何解决