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

135

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

🌹

17 Answers

Original

✔️Accepted Answer

yrokhlin

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.

I am running in to this issue as well E.g if you have some hover styles on a button And when you cli...

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

JSBin

Code

Demo

✔️Accepted Answer

Related Issues: