Toggling pseudo classes with devtools

[INcroatia]

Hello,

Toggling :hover and :focus pseudo classes using Firefox or Chrome devtools doesn’t seem to be working for Pro. Is this normal?

Thank you

[ruenel]

Hey Paper+Screen,

Thanks for writing in!

The :focus and :hover pseudo class inherits the Interaction option in the element settings. It is the same in X’s Cornerstone elements or with Pro Editor elements. In the element settings, you will see “Base” and “Interaction” option.

This will be the :active and the :hover style property of the element. This is mostly in the background color, text color, border color, etc.

Hope this helps.

[INcroatia]

Thanks for replying so quickly.

I’m talking specifically about using the developer tools features that are circled in red in the image below.

I would normally expect that when I toggle between pseudo classes with developer tools, that the result would be reflected on the page that I am inspecting. It’s valuable to have an element toggled onto a constant pseudo class so that I may use the mouse or keyboard for different things. For example checking the contrast of an element when in focus against a background that may have semi-transparent layers.

[ruenel]

Hello Paper+Screen,

Depending on which element you inspect in the developer tool may or may not display any properties. For example for a button element or element that has interactions, the hover pseudo class is not use. We have a different way of adding the interaction which is by way of custom class and CSS. In the button element, as you hover over it, a class x-interactive is added to the element and then the element styling will be applied. Please see the image below.

Active element styling:

Enabling the :hover pseudo class, nothing happens:

Hovering the element with a mouse:

This means that pseudo class in the developers tools works within Cornerstone/Pro editors elements. It just that the styling were applied differently. This is also the reason that as soon as you select hover or focus in the tool, there aren’t any styling because we do not have one. This is also a good opportunity if you want to customize the element with your own styling because you can simply have something like this code:

button:hover {
  border: solid 1px red;
}

button:focus {
  border: solid 1px green;
}

Hope this helps.

[INcroatia]

Yes it does answer my question. Thank you for your help!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.