关于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事件不就行了？