Css Mouse Cursor - A Cool Css Affect

Discussion in 'HTML & Website Design' started by adsreal, Nov 10, 2006.

  1. #1
    Some of you may not know, that you can use CSS to change the mouse cursor when someone places their mouse over a tag.

    Check out this simple example:

    <a href=”helpPage.html” style="cursor: help"> Help </a>

    In the above example, I used the ‘help’ cursor to give people an extra clue that the link will take them to a help page.

    The key to making this work is this line:

    style="cursor: help"

    The above CSS code is telling the browser to use the built in ‘help’ cursor.
     
    adsreal, Nov 10, 2006 IP
    sawz likes this.
  2. sawz

    sawz Prominent Member

    Messages:
    8,225
    Likes Received:
    808
    Best Answers:
    0
    Trophy Points:
    360
    #2
    and i always thought it was a little more complicated then that. greenies your way for pointing that out.:D
     
    sawz, Nov 10, 2006 IP
  3. dp-user-1

    dp-user-1 Well-Known Member

    Messages:
    794
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #3
    It's simple, but annoying. Like scrollbars, the cursor is part of the user's interface, and it's not your position to change it unless it truly adds to the functionality of the page.

    ::EDIT:: This is not to say that it should never be used, just don't change my cursor to a giant smiley face.
     
    dp-user-1, Nov 10, 2006 IP
  4. itsme

    itsme Well-Known Member

    Messages:
    1,232
    Likes Received:
    96
    Best Answers:
    0
    Trophy Points:
    180
    #4
    I agree.

    CSS can make things fun (for you) but you need to be careful...
     
    itsme, Nov 10, 2006 IP
  5. -Abhishek-

    -Abhishek- Regaining my Momentum!

    Messages:
    2,109
    Likes Received:
    302
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Let me list all different types of cursors!

    As he has given above!
    Here's a whole lot of options that have!


    Alternatively we can use a custom image, with assigning a simple 16x16 cur file to the "a" attribute
    Cheers guys!

    Abhishek
     
    -Abhishek-, Nov 10, 2006 IP
  6. Anteros

    Anteros Peon

    Messages:
    631
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I've got a nice idea from this, :p
     
    Anteros, Nov 10, 2006 IP
  7. rosiee007

    rosiee007 Notable Member

    Messages:
    3,352
    Likes Received:
    179
    Best Answers:
    0
    Trophy Points:
    230
    #7
    Can any one show a site which is using cursors with CSS?
     
    rosiee007, Nov 10, 2006 IP
  8. dp-user-1

    dp-user-1 Well-Known Member

    Messages:
    794
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #8
    I actually use the effect on my site (www.monochromedia.com/faq.html), as it serves a purpose. I'll be honest and say I had it as a hand, but this thread inspired me to change it to the help cursor. :p
     
    dp-user-1, Nov 10, 2006 IP
  9. rosiee007

    rosiee007 Notable Member

    Messages:
    3,352
    Likes Received:
    179
    Best Answers:
    0
    Trophy Points:
    230
    #9
    The help cursor looks really cute. It sure serves your purpose! :cool:
     
    rosiee007, Nov 13, 2006 IP
  10. jacobbannier

    jacobbannier Active Member

    Messages:
    1,155
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    90
    #10
    Thanks for the list, it's a good tool (Bookmarked) :p
     
    jacobbannier, Nov 13, 2006 IP
  11. ish1301

    ish1301 Banned

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Wonderful CSS effects !!! ... I learned new thing today ... thanks
     
    ish1301, Nov 13, 2006 IP
  12. -Achilles-

    -Achilles- Banned

    Messages:
    166
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Cool stuff :).
     
    -Achilles-, Nov 13, 2006 IP