How to enable hover in ReactJS

Question

I have here code made in ReactJS.

import React, { Component } from "react";

class Sidebar extends Component {
  state = {
    hovered: false
  };

  onMouseOver = e => {
    this.setState({ hovered: true });
  };

  render() {
    const { hovered } = this.state;
    if (hovered) {
      return (
        <div
          className="flex-container justify-content-end"
          style={{
            display: "flex",
            textDecoration: "none",
            listStyleType: "none"
          }}
          onMouseOver={this.onMouseOver}
        >
          <div className="col-sm-12 col-md-4">
            <ul className="nav flex-column nav-pills">
              <li
                className="nav-item"
                style={{ padding: "0.5em", backgroundColor: "#809fff" }}
              >
                {" "}
                <a
                  href="prva_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  PRVA DIVIZIJA
                </a>
              </li>
              <li
                className="nav-item"
                style={{
                  padding: "0.5em"
                }}
              >
                {" "}
                <a
                  href="druga_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DRUGA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="treca_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  TRECA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="cetvrta_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  CETVRTA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="peta_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  PETA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="divizija_tuzla.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA TUZLA
                </a>
              </li>

              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="divizija_sarajevo.html"
                  style={{
                    backgroundColor: "#ff6666",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA SARAJEVO
                </a>
              </li>

              <li
                className="nav-item"
                style={{
                  padding: "0.5em"
                }}
              >
                <a
                  href="divizija_bugojno.html"
                  style={{
                    backgroundColor: "#ff6666",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA BUGOJNO
                </a>
              </li>
            </ul>
          </div>
        </div>
      );
    }

https://pastebin.com/zYQ4rFxE

The code is suppose to hover when I go over with mouse on the labels. But it doesn't work for some reason. Can I ask for guidance for this solution? I don't ask for finished solution.

Possible duplicate of How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over — Emile Bergeron
– Emile Bergeron, Commented Nov 7, 2019 at 18:11

Menachem Hornbacher · Accepted Answer · 2019-11-07 18:00:29Z

2

As far as I know, react does not have a hovered state for a element (like CSS does). However you can use the onMouseEnter and onMouseLeave events to determine if your event is being hovered over and update the state accordingly

See this answer for an example implementation: react show button on mouse enter

answered Nov 7, 2019 at 18:00

Menachem Hornbacher

2,1752 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to enable hover in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related