So basically when i hover over "drive" option which is a h1, i want a div container to appear that contains several other in detail options. Then if i click on "ride" option which is another h1, i want a div to appear as well that has more details and options. Only one can be chosen at a time, either ride/drive, but if i hover over ride, then the div that appears needs to stay until the mouse is off the div, if i hover over drive, then the drive div needs to appear. Hope you guys can help! Here is my code
import React, { Component } from 'react';
import './App.css';
class Header extends Component {
render() {
return (
<div className="Nav">
<header className="Nav-header">
<h1 className="Nav-title">Halcon</h1>
<p className="Nav-drive"><a href="*" className="Nav-link" onMouseEnter={this.mouseOver.bind(this)} onMouseLeave={this.mouseOut.bind(this)}>Drive</a></p>
<p className="Nav-seperator">|</p>
<p className="Nav-ride"><a href="*" className="Nav-link">Ride</a></p>
</header>
// Div i want to appear if Drive is hovered
<div className="Drive-toggle">
<h3>Why drive with us?</h3>
<h3>Safety</h3>
<h3>Requirements to Drive</h3>
<h3>Driver App</h3>
<h3>Driver - Log In</h3>
</div>
// Div i want to appear if Ride is hovered
<div className="Ride-toggle">
<h3>Why drive with us?</h3>
<h3>Safety</h3>
<h3>Requirements to Drive</h3>
<h3>Driver App</h3>
<h3>Driver - Log In</h3>
</div>
</div>
);
}
}
export default Header;
You can use the state
to store a Boolean value of hovered
, and use the onMouseEnter
and onMouseLeave
to update the state
.
Then you can render
a style, a CSS
class or a component conditionally .
Here is a small running example:
class App extends React.Component { constructor(props) { super(props); this.state = { hovered: false }; } onMouseEnter = e => { this.setState({ hovered: true }); }; onMouseLeave = e => { this.setState({ hovered: false }); }; render() { const { hovered } = this.state; const style = hovered ? { backgroundColor: "#333", color: "#fff" } : {}; return ( <div> <div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}> Hover over me! </div> <hr /> <div style={style}>Was it hovered?</div> <hr /> {hovered && <div>Yes!!</div>} </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.