This community-built FAQ covers the “Hover States and Cursors” exercise from the lesson “Learn Links and Buttons”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Learn Navigation Design
FAQs on the exercise Hover States and Cursors
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (
) below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like (
) to up-vote the contribution!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
What unwanted behavior can come from putting the cursor:pointer in the a:hover section instead of the a { } section?
1 Like
hey there. i was wondering if someone could post a simple tutorial on how to code a custom cursor, such as a bumble bee instead of a pointer, using javascript? Thanks!
I think that can be done using CSS
by using the cursor property.
Here’s some references:
Mozilla page on CSS cursor property
W3 schools page on CSS cursor property
They say that the CSS for a custom cursor (using a image from somewhere on the internet as a cursor) would look something like this:
.class-for-custom-cursor {
cursor: url("url_for_cursor_image_goes_here"), auto;
}
In the second step, you are asked to add cursor:pointer to the a selector and not the a:hover one because it “can cause unwanted behavior in some cases”.
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
What are some examples of unwanted behaviour of adding it to the a:hover selector?
is there unique cursor’s besides the regular, what im asking is can we customise our own cursor?
