Pseudo states
In WordPress 7.1, users have more power over styling the pseudo states of blocks. Currently limited to the Button and Navigation Link blocks, users are able to apply styles to ‘hover’, ‘focus’, ‘focus-visible’ and ‘active’ states.
Pseudo states support definitions in theme.json for themers, and block styling in global styles and on block instances for users.
Defining pseudo states for blocks in theme.json
Define pseudo states within the block object using the properties “:hover”, “:focus”, “:focus-visible”, and “:active”. Pseudo state names are always prefixed with a :.
"styles": { "blocks": { "core/button": { "color": { "background":