我的物品很多块。当用户将鼠标悬停在项目信息上时,我想显示其信息(项目附近的方块)。 这是一个例子: First example Second example
答案 0 :(得分:1)
您可以通过反应来实现。
class nameOfClass extends React.Component{
constructor(props){
super(props)
this.state = {
box1Hover:false,
box2Hover:false,
box3Hover:false,
box4Hover:false,
}
this.trueDisplay = this.trueDisplay.bind(this)
this.falseDisplay = this.falseDisplay.bind(this)
}
trueDisplay(e){
this.setState({[e.target.name]:true})
}
falseDisplay(e){
this.setState({[e.target.name]:false})
}
render(){
return(
<div>
<div name="box1Hover" onMouseEnter={this.trueHover} onMouseLeave={this.falseHover}>
....
// your on hover content in bellow line
{this.state.box1Hover?<h5>Mouse hovering over me</h5>:""}
....
<div>
<div name="box2Hover" onMouseEnter={this.trueHover} onMouseLeave={this.falseHover}>
....
// your on hover content in bellow line
{this.state.box2Hover?<h5>Mouse hovering over me</h5>:""}
....
<div>
<div name="box3Hover" onMouseEnter={this.trueHover} onMouseLeave={this.falseHover}>
....
// your on hover content in bellow line
{this.state.box3Hover?<h5>Mouse hovering over me</h5>:""}
....
<div>
</div>
)
}
}
如果您知道jquery,则可以使用工具提示 https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp