React pass onMouseHover to Children component

Question

I am implementing a small react component called react-hover in it's V2 version.

This lib just simply enable user to define their trigger and hover component and make the hover component appear when mouse hover on trigger component.

    <ReactHover
      options={optionsCursorTrueWithMargin}>
      <ReactHover.Trigger>
        <TriggerComponent />
      </ReactHover.Trigger>
      <ReactHover.Hover>
        <HoverComponent />
      </ReactHover.Hover>
    </ReactHover>

Now I am facing an issue of passing the onMouseHover events to the children component in tigger component:

 render () {
     return (
     <div
        onMouseOver={this.onMouseOver.bind(this)}
        onMouseOut={this.onMouseOut.bind(this)}
        onMouseMove={this.onMouseMove.bind(this)}
        onTouchStart={this.onTouchStart.bind(this)}
        onTouchEnd={this.onTouchEnd.bind(this)}
    >
    {this.props.children.props.children}
  </div>
 )
}

Because only the children component can tigger the hover component, but in above implementation, it is binding the listeners to the parent div, so I met the issue that parent div's css width is more than the childen's width, so when mouse is on the div ( not in the children) the hover component show up. But I cannot control the children component's inner code as it is passed in as children.

I am just wondering how to tackle this issue?

The example code is here. The place where bind the mouse event is here

Just wondering what's the solution for this? how to bind those events to the children component when cannot put code in children component.

Below is showing when mouse outside of trigger component still can trigger the hover component.

Answer 1

Just resolved by add ref to the container and retrieve Children's width:

let childStyles = this.refs.triggerContainer.children[0].style

and apply to the current parent container.

check this code