Question

我有一个带有一些切换功能的div

  <div className={styles.divStyle} onMouseEnter={this.hover} onMouseOut={this.hover}>

和继承人的功能

  constructor(props) {
    super(props);
    this.state = {
      isToggle: false
    };
    this.hover = this.hover.bind(this);
  }

  hover(e) {
    this.setState({
      isToggle: !this.state.isToggle
    });
  }

它正在切换隐藏显示隐藏和显示div中某些图标的块

<i style={{display: this.state.isToggle ? 'block': 'none'}} class="fa fa-chain"/>

但每当我将鼠标悬停在div中的图标或图像上时，它都被视为鼠标输出，我希望div中的项目计为切换功能的div，我做了一个我正在谈论的样本在一个codepen中。将鼠标悬停在图像或文本上

https://codepen.io/anon/pen/wjKXqQ

Answer 1

您需要onMouseLeave：

<section onMouseEnter={this.hover} onMouseLeave={this.hover}>

更新了笔：https://codepen.io/acdcjunior/pen/pVjZzg

有关mouseleave event的更多信息（粗体是我的）：

指针设备的指针会触发 mouseleave 事件   （通常是鼠标）移出具有侦听器的元素   附在它上面。

mouseleave和mouseout相似，但mouseleave不同   不是泡沫而mouseout。
这意味着mouseleave被解雇了   指针有退出元素和所有后代，而   当指针离开元素或离开其中一个时，会触发mouseout   元素的后代（即使指针仍然在   元素）。

Answer 2

您使用过的活动是这项工作的错误选择。使用onMouseOver事件

在div中反应onhover toggle html

2 个答案: