Popover气泡卡片怎么添加onMouseOver鼠标悬停事件

Question

const ABoxContent = ( // 鼠标悬停到单格上显示的气泡卡片
    <div style={{display:"flex",width:"230px",height:"100px"}}>
          <div style={{flex:"1"}}>
               <img style={{border:"2px solid #ccc"}} width={"100%"} height={"100px"} alt="logo" src={data.Price} />
           </div>
           <div style={{flex:"1"}}>
                 <div>名称:</div>
                 <div>分类:</div>
                 <div>单价:</div>
            </div>
      </div>
)

ColumnsList.push(
    <Popover placement="right" content={ABoxContent} key={'li_'+this.state.reactid++}>
          <div className="aBox" key={'li_'+this.state.reactid++} onMouseOver={()=>this.onfocusBox(id)} onMouseLeave={this.onmouseleaveOut}>
                {shelfClassList[j].classRow} - {shelfClassList[j].classColumn}
          <div>
    </Popover>
                                           
)

想要鼠标悬停上去就显示一个小气泡窗口显示当前单格的详细信息,popover怎么获取触发啊

Answer 1

根据你的代码看不出什么问题，你可以参考我刚写的demo：在Popover里继续用Popover,也不用手动写 hover 事件了。
https://codepen.io/cnjs/details/XWmRypG