使用 CSS 悬停在父 JSX 上更改子 div 的样式

Question

I'm using the material-ui table. Within it I am mapping the rows as such:

.map(row => (
  <TableRow
    className={classes.clickableRow}
    key={row[rowKey]}
  >
    {generateTableCheckbox(row)}
    {
      columns.map(column => (
        <TableCell
          onClick={onRowClick && !row.disabled
            ? event => onRowClick(event, row)
            : null}
          key={column.field}
          className={classes.body}
          title={column.alt ? column.alt(row) : row[column.field]}
        >
          {column.format ? column.format(row) : row[column.field]}
        </TableCell>
      ))
    }
    {generateTableHoverOptions(row)}
  </TableRow>
))

As you can see the className gets set to clickableRow .

The TableRow contains a hover options div that is rendered & placed to the right with this function:

const generateTableHoverOptions = () => {
  if (selected) {
    return (
      <TableCell className={classes.rightHoverIcon}>
        <Icon>expand_more</Icon>
      </TableCell>
    );
  }
  return null;
};

I want to be able to change the backgroundColor of the <TableCell /> (className being rightHoverIcon ) that is returned from that function, when hovering over the clickableRow . Here is the js CSS I've been attempting to use:

clickableRow: {
  '&:hover': {
    backgroundColor: theme.palette.background.default,
    cursor: 'pointer',
  },
  '&:hover > .rightHoverIcon': {
    backgroundColor: 'red',
  },
},
rightHoverIcon: {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  marginTop: 1,
  height: 49,
  position: 'absolute',
  right: 0,
  borderBottomWidth: 1,
  borderBottomColor: 'rgba(224, 224, 224, 1)',
},

The code expecting to target the div is '&:hover > .rightHoverIcon' , I've tried other variations such as '&:hover ~ .rightHoverIcon' and &:hover .rightHoverIcon but none seem to be working.

I've checked other questions on SO and while similar they're not like my issue. If anyone has any ideas please let me know!

Thanks in advance

Answer 1

&:hover > .rightHoverIcon expects .rightHoverIcon to be a direct child of clickableRow , but it isn't (there's a table cell in-between). Remove the > so you're using a descendant combinator instead of a child combinator :

clickableRow: {
  '&:hover': {
    backgroundColor: theme.palette.background.default,
    cursor: 'pointer',
  },
  '&:hover .rightHoverIcon': {
  // -----^
    backgroundColor: 'red',
  },
},

Or, alternately, if you want to use child combinators, you'll need at least two of them (assuming TableCell only puts one element between its parent and the icon), eg &:hover > something-for-the-cell > .rightHoverIcon .