1

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')}`,
    },
   }}
 />
TRomesh
  • 4,323
  • 8
  • 44
  • 74

1 Answers1

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
Dyo
  • 4,429
  • 1
  • 15
  • 30
  • I have already done that but it doesn't work. any reason why the hover effect is not working in jsx? – TRomesh Jun 18 '19 at 10:13
  • @TRomesh Ok sorry for that, selectors are not allowed in inline styles. I edited my answer. – Dyo Jun 18 '19 at 13:13