What happens if I use cursor:pointer inside the :hover pseudo-class?

Get Help CSS
#1

Hi!

In the second exercise of the “Hover States and Cursors” lesson it is stated that:

Add a declaration to also change the cursor to pointer. Even though this behavior is seen when the mouse is hovered over, you should add it to the rule for all <a> tags, as the browser will only change cursor styles on hover by default. Putting the rule on an a:hover rule can cause unwanted behavior in some cases.

I have tried to search in Google but it yielded no relevant results (just this question in another forum with no clear answer), what could happen if cursor:pointer is located inside :hover?

#2

Hi there,

I did some digging for you–
It appears that this question comes down to performance. If you place the cursor: pointer on the element itself, it loads in when the CSS loads in. If the cursor: pointer is placed on the :hover, it is dependent on the :hover loading in–which could cause some delays (for instance) if you have a linked image or custom pointer. (Though I have noticed that Chrome has a built-in pointer on any link)

1 Like