New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Controlling cursor states

From: CSS: Styling Navigation

Video: Controlling cursor states

One of the properties in CSS that is often overlooked is the cursor property. It might be because people really don't have that often a cause to use it. But it gives you the very, very powerful ability to control the display of the cursor. In the case of our horizontal menu, that means that we can give the appearance that the link is disabled. So we're going to finish up our horizontal menu by working on the horizontal.htm from the 04_08 directory, and this is an incredibly simple fix.

Controlling cursor states

One of the properties in CSS that is often overlooked is the cursor property. It might be because people really don't have that often a cause to use it. But it gives you the very, very powerful ability to control the display of the cursor. In the case of our horizontal menu, that means that we can give the appearance that the link is disabled. So we're going to finish up our horizontal menu by working on the horizontal.htm from the 04_08 directory, and this is an incredibly simple fix.

I'm going to go into the current class selector, and I'm just going to create a brand-new line at the bottom of that, I'm going to type in cursor, and you've got a lot of different choices, and this is the one time that I'm going to reference some of Dreamweaver's visual tools, because the Autohinting allows me to do this. Look at all the different choices you have for cursors. You have help, you have the resize, you have none, which can be really frustrating, pointer, which is going to give you the hand. Now weight which is, of course, going to give you a little hour glass, depending upon the Browser, or the beach ball, depending upon which platform you are on.

You need to be very, very careful about using this because you can fool people into believing something is what it is not. It's nice if you are linking to maybe your frequently asked question or linking to a live chat agent to use little help icon. That's actually kind of nice. However, if you have a textbox for example, and you change the cursor to the resize, your users are going to assume they can resize that, and if they can't, they are going to get very upset. So remember, it's kind of nice that you can do this stuff, but you want to be very careful about how you utilize this property.

So I'm going to just choose default, which is going to give me any user agent's default cursor, which is typically not the hand pointer, so I'm going to save this and then go back into a browser and preview this page. And now, notice as I browse over my menu items the Hand icon, the pointer comes up to let me know that it's an active link. But when I browse over Home, it goes back to that default arrow. So it looks just like anywhere else on the page, and it really looks like that link is the activated.

The link is not inactive, it still works. If I were to click on that and I actually had a homepage, it would take me to it. Okay, so the usability issue still exists that if somebody is not using a mouse for example and they tab through your links, that is still considered an active link, and it's still going to work. Now for the most part, within a menu just indicating your current page that's no harm, no foul. But there are going to be times when you're going to want to actively disable that link. If you want to do that, you're going to have to turn towards a more robust solution such as JavaScripting.

So that's one of the things that you'll want to think about before you begin changing the display of the cursor.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 16387 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.