Attempting to change the background color of a table row when hovering in React, but experiencing no success

Question

Attempting to change the background color of a table row when hovering in React, but experiencing no success

Describing the appearance of my table row:

<tr
    onMouseEnter={() => {this.buttonIsHovered = true} }
    onMouseLeave={() => {this.buttonIsHovered = false}}
    className={this.buttonIsHovered ? 'hover' : null}>

The initial value of buttonIsHovered is false. The .hover class in CSS is defined as:

.hover {
  background-color: aqua
}

Even though I've imported the CSS successfully, the hover effect doesn't seem to work. Does anyone have any suggestions? Your help is appreciated, thank you!

javascript css reactjs

Answer 1

Answer №1

Check out this sample that showcases exactly what you're looking for:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    red: false
  };

  toggle = () => {
    this.setState({ red: !this.state.red });
  };

  render() {
    return (
      <React.Fragment>
        <h1
          onMouseEnter={this.toggle}
          onMouseLeave={this.toggle}
          style={{ background: this.state.red ? "red" : "" }}
        >
          Hover me!
        </h1>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can view the live example on CodeSandbox here.

Answer 2

Check out this sample that showcases exactly what you're looking for:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    red: false
  };

  toggle = () => {
    this.setState({ red: !this.state.red });
  };

  render() {
    return (
      <React.Fragment>
        <h1
          onMouseEnter={this.toggle}
          onMouseLeave={this.toggle}
          style={{ background: this.state.red ? "red" : "" }}
        >
          Hover me!
        </h1>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can view the live example on CodeSandbox here.

Answer 3

Answer №2

Hey there! Just tried out this code snippet and it worked like a charm.

    class Application extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      background: 'white'
    }
    this.changeBackground = this.changeBackground.bind(this);
    this.resetBackground = this.resetBackground.bind(this);
  }

  changeBackground(){
    this.setState({background:'blue'})
  }

  resetBackground(){
    this.setState({background:'white'})
  }

  render() {
    return (
      <div className="Application">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <table>
            <tbody>
              <tr onMouseEnter={this.changeBackground} onMouseLeave={this.resetBackground} style={{backgroundColor:this.state.background}}><td>Hello World</td></tr>
            </tbody>
          </table>
        </header>
      </div>
    );
  }
}

export default Application;

Answer 4

Hey there! Just tried out this code snippet and it worked like a charm.

    class Application extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      background: 'white'
    }
    this.changeBackground = this.changeBackground.bind(this);
    this.resetBackground = this.resetBackground.bind(this);
  }

  changeBackground(){
    this.setState({background:'blue'})
  }

  resetBackground(){
    this.setState({background:'white'})
  }

  render() {
    return (
      <div className="Application">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <table>
            <tbody>
              <tr onMouseEnter={this.changeBackground} onMouseLeave={this.resetBackground} style={{backgroundColor:this.state.background}}><td>Hello World</td></tr>
            </tbody>
          </table>
        </header>
      </div>
    );
  }
}

export default Application;

Answer 5

Answer №3

To modify the color, you can utilize CSS styling:

const styles = theme => ({ 
 button: {
  margin: '15px 0',
  color: '#fff',
  borderRadius: '5px',
  backgroundColor: '#fff',
  '&:hover': {
    backgroundColor: '#999',
  },
 },
})

Answer 6

To modify the color, you can utilize CSS styling:

const styles = theme => ({ 
 button: {
  margin: '15px 0',
  color: '#fff',
  borderRadius: '5px',
  backgroundColor: '#fff',
  '&:hover': {
    backgroundColor: '#999',
  },
 },
})

Attempting to change the background color of a table row when hovering in React, but experiencing no success

Answer №1

Answer №2

Answer №3

Similar questions

A guide on incorporating the CSS 'content' property with the 'option' tag

Incorporating XMLHttpRequest in my React Typescript App to trigger a Mailchimp API call, allowing users to easily sign up for the newsletter

The Grid within the Container is presented vertically rather than horizontally

Display issue with React TypeScript select field

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Switching the image on click of an option tag

What is the best way to utilize mapping and filtering distinct values in an array using TypeScript?

jQuery - Event cannot be triggered on the 'deselect' or 'focusout' of <option> tag

Breaking up an array into smaller chunks with a slight twist

React Div Element Not Extending to Web Page Margin

The Facebook share button on my website is malfunctioning

Using AJAX with Rails to add data to multiple items in a one-to-many association

Blurry text issue observed on certain mobile devices with Next.js components

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

The project is not being recognized by 'webpack' when running within it

Why is there an issue with the JavaScript array when accessing data['sax']?

Automatically populate form fields with data from the clicked row in the HTML table when using JSP

Select a random object from a document and dispatch it. A Discord bot

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

Navigating through nested JSON objects in React to display data effectively