カスタムマウスアイコン---cursor urlを使用する

1938 ワード

この間、プロジェクトでマウスアイコンをカスタマイズする必要がありました.一般的に私たちが使っているマウスのスタイルは固定されているものが多く、カスタムマウスのアイコンはあまりよく使われていないので、忘れないように、この小さな知識点をまとめました.
マウスアイコンのカスタマイズ
マウスアイコン、すなわちcss cursor urlの使用をカスタマイズします.
css cursor urlの使い方:
css:{cursor:url("    "),auot};
//IE,FF,chrome      

サンプルコード:
 

解析:前のurlはマウスアイコンをカスタマイズするパスで、相対/絶対パスです.2番目のパラメータはcss標準のcursorスタイルです.他のプロパティ(pointer/default/など)に変更できます.
注:w 3 schoolは、url定義のカーソルに代替オプションがないように、2番目のパラメータに通常のカーソルを定義することを推奨します.なお、IE下の2番目のパラメータは省略することができる.
マウスアイコンをカスタマイズするには、以下の点に注意してください.
  • アイコンのフォーマットIEはcur,ani,icoの3つのフォーマットをサポートし、FFはbmp,gif,jpg,cur,icoのいくつかのフォーマットをサポートし、aniフォーマットもサポートしないし、gifアニメーションフォーマットもサポートしないので、url参照のアイコンをicoまたはcurフォーマットに保存するのが一般的である.
  • アイコンのサイズマウスアイコンのサイズは32*32をお勧めします.そうしないと、サイズが一致しない問題が発生する可能性があります.

  • cursorプロパティ値を添付

    説明
    url
    使用するカスタムカーソルのURLコメント:URLによって定義された使用可能なカーソルがないように、このリストの最後に通常のカーソルを指定してください.
    default
    既定のカーソル(通常は矢印)
    auto
    デフォルト.ブラウザ設定のカーソル
    crosshair
    カーソルに十字線を表示
    pointer
    カーソルはリンクされたポインタ(片手)だけで表示されます.
    move
    このカーソルはオブジェクトを移動できるだけです
    e-resize
    このカーソルは、行枠の端を右(東)に移動できることを示しています.
    ne-resize
    このカーソルは、行枠のエッジを上および右に移動できることを示します(北/東)
    nw-resize
    このカーソルは、長方形のボックスのエッジが上および左に移動できることを示します(北/西).
    n-resize
    このカーソルは、長方形のボックスのエッジが上(北)に移動できることを示します.
    se-resize
    このカーソルは、長方形の枠の縁が下または右に移動できることを示します(南/東).
    sw-resize
    このカーソルは、長方形のボックスのエッジが下または左に移動できることを示します(南/西).
    s-resize
    このカーソルは、長方形のボックスのエッジが下に移動できることを示します(北/西).
    w-resize
    このカーソルは、長方形のボックスのエッジが左に移動できることを示します(西).
    text
    このカーソルはテキストを示します
    wait
    このカーソルはプログラムが忙しいことを示しています(通常は時計や砂時計)
    help
    このカーソルは、使用可能なヘルプ(通常は疑問符または風船)を示します.