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中时，同一div的函数onMouseOut被触发并将我的状态更改为“none”，我需要离开整个<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" }}

React：make DOMElement UNhoverble

1 个答案: