Add hover effect to react div using inline styling

Question

I have a div which takes the shape of a circle the css property to display a circle is taken from the circle class. The color of the circular div is taken from the inline styling. Here a function called Status() is used where it will return a hex color code. The circle renders with the colors according to the status we pass to the Status function. To achieve the hover effect i added a ':hover' property to the styling object but it doesn't work. Here is the code that i have tried. Any idea on how to achieve this?. i need to add a boarder/glow to the circle on mouse hover.

<div
  className="circle"
  style={{
   backgroundColor: Status('new'),
   ':hover': {
     boxShadow: `0px 0px 4px 2px ${Status('complience')}`,
    },
   }}
 />

You can't - stackoverflow.com/questions/5293280/…

Paulie_D
– Paulie_D

2019-06-18 10:16:03 +00:00
Commented Jun 18, 2019 at 10:16 — Paulie_D
– Paulie_D, Commented Jun 18, 2019 at 10:16

Dyo · Accepted Answer · 2019-06-18 13:27:19Z

6

~~Try adding & before :hover~~

This is not possible with inline styles, you may want to use onMouseEnter and onMouseLeave props to get the hover state and use it, for example :

class MyComponent extends React.Component {
  state= {
    hover: false,
  }
  handleMouseEnter = () => {
    this.setState({ hover: true });
  }
  handleMouseLeave = () => {
    this.setState({ hover: false });
  }
  render() {
    const { hover } = this.state;
    return(
      <div
        className="circle"
        style={{
          backgroundColor: Status('new'),
          ...(hover && { boxShadow: `0px 0px 4px 2px ${Status('complience')}`}),
        }}
        onMouseEnter={this.handleMouseEnter} // Or onMouseOver
        onMouseLeave={this.handleMouseLeave}
      />
    )
  }
}

Alternatives :

Use a third party styling library (e.g. Styled-components)
Use classnames / css stylesheets

edited Jun 18, 2019 at 13:27

answered Jun 18, 2019 at 10:00

Dyo

4,4641 gold badge18 silver badges30 bronze badges

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

2 Comments

TRomesh Over a year ago

I have already done that but it doesn't work. any reason why the hover effect is not working in jsx?

Dyo Over a year ago

@TRomesh Ok sorry for that, selectors are not allowed in inline styles. I edited my answer.

Collectives™ on Stack Overflow

Add hover effect to react div using inline styling

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest