What's the difference between _hover and &:hover?

[punkpeye]

I often run into situations where one works and the other does not, e.g.

// TODO why does _hover not work here?
'&:hover': {
  '& .message-footer': {
    '& [data-part="main"]': {
      visibility: 'visible',
    },
  },
},

What's the difference between them?

If helpful, the full css definition is:

css({
  '& .message-footer [data-part="main"]': {
    visibility: 'hidden',
  },
  // TODO why does _hover not work here?
  // https://github.com/chakra-ui/panda/discussions/3346
  '&:hover': {
    '& .message-footer': {
      '& [data-part="main"]': {
        visibility: 'visible',
      },
    },
  },
  _current: {
    '& .message-footer [data-part="main"]': {
      visibility: 'visible',
    },
  },
  display: 'flex',
  flexFlow: 'column',
  gap: '8px',
})

[anubra266]

Only difference is _hover also styles elements with [data-hover] attribute.
Works well for me here
https://play.panda-css.com/Ol-TS__cJR