Jadi pada dasarnya ketika saya mengarahkan kursor ke opsi "drive" yang merupakan h1, saya ingin wadah div muncul yang berisi beberapa opsi detail lainnya. Kemudian jika saya mengklik opsi "naik" yang merupakan h1, saya ingin div muncul juga yang memiliki lebih banyak detail dan opsi. Hanya satu yang dapat dipilih pada satu waktu, baik naik/drive, tetapi jika saya mengarahkan kursor ke atas, maka div yang muncul harus tetap sampai mouse mati div, jika saya mengarahkan kursor ke drive, maka div drive perlu muncul . Semoga kalian bisa membantu! Ini kode saya

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;
4
Ricardo 1 Januari 2018, 10:37

1 menjawab

Jawaban Terbaik