• home
  • forum
  • my
  • kt
  • download
  • CSS and Cursors

    Author: 2007-07-07 08:54:12 From:

    Browser Compatibility Note:

    These commands are part of CSS2, and are supported by modern browsers like » Firefox, » Safari and » Opera; and in » IE all the way down to version 4. They¡¯re safe to use.

    Whether these work properly depends largely on how your reader¡¯s computers are set up. If they have changed their cursors, their modified cursors will pop up. No big deal really, and the majority of people will get what you¡¯d expect.

    To add these to one or two links, add this attribute to their a tags:

    style="cursor: target; "

    If you want to add it to an entire class of links, add this line of CSS to your stylesheet:

    a.help {cursor: help; }

    Then add the help class to whatever links you'd like to be affected, like so:

    <a href="manual/" class="help">Manual</a>


    cursor: autothe default cursor
    cursor: crosshairgun-style cross
    cursor: defaultno change
    cursor: pointerthe normal hand pointer that appears when you hover over a link
    cursor: handa value that is only supported in IE. Don¡¯t use it, use pointer instead
    cursor: waitthe hourglass (non-animated, sadly)
    cursor: textthe text-selecting 'I-beam' thing
    cursor: helpan arrow with a question-mark
    cursor: movecrosshair with arrows on the ends
      
    cursor: n-resizean arrow pointing north
    cursor: ne-resizean arrow pointing north-east
    cursor: nw-resizean arrow pointing north-west
    cursor: e-resizean arrow pointing east
    cursor: w-resizean arrow pointing west
    cursor: s-resizean arrow pointing south
    cursor: se-resizean arrow pointing south-east
    cursor: sw-resizean arrow pointing south-west

    Please make sure you¡¯re using these commands for a good reason. My favourite implementation is to put them in a navigation frame and have them pointing towards the frame their link will open in. You can use a help cursor for links to additional information and definitions. Or how about a special cursor for external links? Classy.

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      CSS (142)

    New

    Hot