cursor (mouse hand type) properties

(I) a brief introduction

When browsing the web, usually you see the shape of the mouse cursor arrow, hand, hourglass, etc., and in the windows actually see the mouse pointer species even more than this.

In general, the shape of the mouse cursor controlled by the browser is responsible for most cases of an arrow-shaped cursor shape, when a link, the pointer changes to the shape of the fingers.

Attribute specifies the type of the cursor to be displayed cursor (shape).

This attribute defines the shape of the cursor when the mouse pointer is placed within the boundaries of an element used.

(Ii) property values

(Iii) a simplified explanation of property

The default cursor property is auto, which indicates, automatically determine the most appropriate type of cursor by the browser according to the current context. and different auto default, default indication client operating system default cursor type.

CSS allows users to create their own mouse cursor picture and save it as .cur cursor file, and then use them with the cursor property.

For example: cursor: url (cursors / cursor.cur );
the above rule indicates that, the browser loads required cursor.cur cursor file name, and use it as a mouse cursor. Of course, the browser may not support .cur cursor file format, or cursor file can not be loaded properly. Thus, most browsers require you must specify an alternate cursor, otherwise, cursor attribute is invalid.

For example: cursor: url (cursors / cursor.cur ), pointer;
using the above rule, if the browser does not support .cur cursor file format, or cursor file can not be loaded normally, will use the pointer as a cursor.

Because different browsers support different cursor file format, Opera and IE only supports .cur format, Firefox, Chrome and Safari both support .cur formats, and also supports the common .jpg, .gif, .jpg format. Therefore, CSS also support the specification of multiple cursor files, separated by commas.

For example: cursor: url (cursors / cursor.cur ), url (cursors / cursor.png), url (cursors / cursor.gif), pointer;
this is the case, the browser will look at each individual URL, until it finds an available cursor file. If the browser can not find any available document will be used as a pointer cursor.

(Iv) code demonstrates:

The overall test code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>cursor样式演示</title>
        <style type="text/css">
            .cursorDiv{
                width: 300px;
                height:150px;
                background: #FF6600;
                border:solid 1px;
                
                cursor:url('img/sanchaji.png'),pointer;
            }
        </style>
    </head>
    <body>
        <div class="cursorDiv">
        </div>
    </body>
</html>

1..url ()
can move the cursor graphics customized to your favorite style icon, url () is an icon in connection may be png, ico, gif, etc., pay attention to () behind a common definition of the url cursor, or a custom icon does not work!