javascript - react : make DOMElement UNhoverble

Question

我正在改变我的div id=MenuBarPropertyDiv元素显示属性，根据鼠标悬停在其他元素上将状态更改为“无”或“阻止”div id=topMenuBar_hardware元素。现在这个 div 有一个子图标 (i) 元素看起来像这样

<div className="topBarItem" id="topMenuBar_hardware"
            onMouseEnter={eventEnter} onMouseOut={eventOut}>
            <i className="fa fa-anchor" aria-hidden="true">
            </i>
             &nbsp; hardware</div>

问题是:当我将图标悬停在 div 内时，函数 onMouseOut同一 div 的，被触发并将我的状态更改为“无”，我需要离开整个 <div>让我的状态再次变为“阻止”。我如何让React忽略<i>元素并使其对鼠标不可见？或者还有另一种方法可以解决这个问题吗？

这是显示代码

   class HomePage extends Component {
       constructor(props) {
           super(props)
           this.state = { topMainBarItem: {display:"none",name:"init"} }
           this.mouseOnMenuBarItem = this.mouseOnMenuBarItem.bind(this)
           this.mouseOutMenuBarItem = this.mouseOutMenuBarItem.bind(this)

    }

    mouseOnMenuBarItem(me) {
        this.setState({ topMainBarItem: {display:"block","name":me.target.id} })

    }
    mouseOutMenuBarItem(me) {
        this.setState({ topMainBarItem: {display:"none","name":me.target.id}  })

    }

    render() {


        return (
            <div >
                {topHeadBar(this.mouseOnMenuBarItem, this.mouseOutMenuBarItem)}
                <div id="MenuBarPropertyDiv"
                     style={{ "display": this.state.topMainBarItem.display }} >
                      this is what you see when hovering the </div>
                <div className="container">

                </div>


            </div>
        )
    }
}

Answer 1

使用CSS删除指针事件:

style={{ "display": this.state.topMainBarItem.display, pointerEvents: "none" }}