关于react的鼠标事件

Question

html结构：

各绑定一个鼠标enter和leave事件

<div class = "banner">

    <div class = "left" onMouseEnter={this.handleMouseEnter.bind(this)} onMouseLeave={this.handleMouseLeave.bind(this)}></div>

    <div class = "right" onMouseEnter={this.handleMouseEnter.bind(this)} onMouseLeave={this.handleMouseLeave.bind(this)}></div>

</div>

下面是react方法：

handleMouseEnter = (e) => {

        if (e.target.className === 'left') {

            //执行代码

        } else if (e.target.className === 'right') {

            //执行代码

        }

}

handleMouseLeave = (e) => {

       

       //执行代码

}

之前提过一次，但是可能没表述清楚，现在重新整理下，用react实现一个效果：

当鼠标悬浮“left”区块时，left区块变大，right区块缩小，反之一样

问题：当我鼠标从banner整个区域外移入到left和right时就会产生效果，但是不是无缝的，当我直接从left移入到right的时候就无法触发right的hover事件，这是为什么？该怎么解决呢？（参考网址：点击查看）

Answer 1

感觉你的逻辑有问题，left和right各绑定一个onMouseEnter事件，在事件中对另一个div处理，然后给banner一个onMouseLeave事件不就行了？