javascript - Add hover effect to react div using inline styling - Stack Overflow

admin管理员组

文章数量:1325236

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('plience')}`,
    },
   }}
 />

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('plience')}`,
    },
   }}
 />

• javascript
• css
• reactjs
• sass

Share Improve this question Follow asked Jun 18, 2019 at 9:59 TRomeshTRomesh 4,48188 gold badges4949 silver badges7878 bronze badges 1

• You can't - stackoverflow./questions/5293280/… – Paulie_D Commented Jun 18, 2019 at 10:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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('plience')}`}),
        }}
        onMouseEnter={this.handleMouseEnter} // Or onMouseOver
        onMouseLeave={this.handleMouseLeave}
      />
    )
  }
}

Alternatives :

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

本文标签： javascriptAdd hover effect to react div using inline stylingStack Overflow