Hover on parent element

[ianobermiller]

Has anyone thought about how to convert the following CSS without using an event handler?

.parent {
  background: white;
}
.child {
  color: black;
}

.parent:hover {
  background: black;
}
.child:hover {
  color: white;
}

[charliermarsh]

We support pseudo-elements with the following syntax:

var parentStyle = RCSS.registerClass({
  background: 'white',
  ':hover': {
    background: 'black'
  }
});
var childStyle = RCSS.registerClass({
  color: 'black',
  ':hover': {
    color: 'white'
  }
});

I think that's sufficient for this case, right?

[ianobermiller]

No, that is different semantics. That will only change the child style when you hover over the child; the expected behavior is to make the child color white when hover over anywhere on the parent.

[bitplanets]

The current solution is to use state in react and based on that change classes or inline styles. I dislike a bit, but goes toward the ideology of this lib, which seems to be a good one.