Disabled items do not seem to have a hover state


I am using a list of ion items as the side menu in my application. When the user is not logged in, there are items disabled in that list. To make that more clear to the user that the item cannot be clicked, we want to implement the not allowed cursor in the CSS code. It seems, however, that disabled items do not trigger the CSS hover state. Since items have their own item-disabled class, I am unable to use CSS disabled pseudoclasses and modifying the .item-disabled class hover state does not work.

When debugging in Safari, I do see the CSS class being triggered when I manually set the item to a hover state by clicking the :hover checkmark in the element inspector. I was wondering if this is intentional behaviour or not, or am I missing something? Is it intentional that the disabled items do not have a :hover state?

This behaviour can be recreated in my codesandbox. It’s a list with 2 non-disabled items and one disabled item. In the CSS you will find all the different attempts to make the disabled item turn red when you hover over it, but so far none of them worked.