Solvedradium Elements that are hidden when in the hover state come back with the hover state active

E.g. if you have some hover styles on a button. And when you click that button the button is hidden. When the button comes back since it never got the onMouseLeave it comes back with the hover state active.

JSBin

https://jsbin.com/yesisoxiti/1/edit?html,js,output

Code

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="//fb.me/react-0.13.1.js"></script>
<script src="https://npmcdn.com/radium@latest/dist/radium.js"></script>
  <meta charset="utf-8">
</head>
<body>

</body>
</html>
// noprotect

var style = {
   ':hover': {
       background: 'red'
   }
};

@Radium
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      shown : true
    };
  }
  render() {    
    return(  
      <div>

        <button key={1} onClick={()=>this.setState({shown:true})}>
          Show
        </button>    

        { this.state.shown &&
          <button key={2} style={style} onClick={()=>this.setState({shown:false})}>Hide</button>
        }

      </div>
    );
  }          
}

React.render(<App/>, document.body);

Demo

onhide

🌹

17 Answers

✔️Accepted Answer

I am running in to this issue as well, I was thinking maybe there could be an API call we could make like radium.clearHover() that clears all current hover state. It's a workaround, at best, but could be useful.

Related Issues:

6
radium Elements that are hidden when in the hover state come back with the hover state active
I am running in to this issue as well E.g if you have some hover styles on a button And when you cli...