title: Add hover effect to react div using inline styling
body: <p>I have a div which takes the shape of a circle the <strong>css</strong> property to display a circle is taken from the <code>circle</code> class. The color of the circular div is taken from the inline styling. Here a function called <code>Status()</code> 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. </p>
  
  <pre><code>&lt;div
    className="circle"
    style={{
     backgroundColor: Status('new'),
     ':hover': {
       boxShadow: `0px 0px 4px 2px ${Status('complience')}`,
      },
     }}
   /&gt;
  </code></pre>