CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSカーソルプロパティの例

CSSカーソルプロパティを使用すると、十字線やプラス記号、ポインタなどを表示できます。次のコードを実行して、CSSにカーソルプロパティを実装してみてください-

例 
<html>
   <head>
   </head>
   <body>
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>
上記の値を追加しました-

値
説明
自動 カーソルの形状は、カーソルが置かれているコンテキスト領域によって異なります。たとえば、テキストの場合は「I」、リンクの場合は「hand」などです。
十字線 十字線またはプラス記号
デフォルト 矢印
ポインタ ポインティングハンド（IE 4ではこの値はハンドです）。
移動 「I」バー
e-resize カーソルは、ボックスの端を右（東）に移動することを示しています。
ne-resize カーソルは、ボックスの端を上下（北/東）に移動することを示しています。
nw-resize カーソルは、ボックスの端を上下（北/西）に移動することを示しています。
n-サイズ変更 カーソルは、ボックスの端を上（北）に移動することを示しています。
se-resize
カーソルは、ボックスの端を上下（南/東）に移動することを示しています。
sw-resize
カーソルは、ボックスの端を上下（南/西）に移動することを示しています。
s-サイズ変更
カーソルは、ボックスの端を下（南）に移動することを示しています。
w-resize
カーソルは、ボックスの端を左（西）に移動することを示しています。
text
Iバー。
待機
砂時計。
ヘルプ
疑問符またはバルーン。ヘルプボタンの上での使用に最適です。

カーソル画像ファイルのソース。

  1. CSS分離プロパティ

    分離プロパティは、要素が新しいスタッキングコンテンツを作成する必要があるかどうかを定義するために使用されます。構文は次のとおりです- 構文 isolation: auto|isolate|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> .demo1 {    background-color: orange; } #demo2 {    width: 300px;    height: 400px; } .demo3 {

  2. CSSフォントバリアントプロパティ

    CSSのfont-variantプロパティは、font-variant-caps、font-variant-numeric、font-variant-alternates、font-variant-ligatures、およびfont-variant-east-asianのプロパティの省略形です。次の値があります- font-variant: normal|small-caps|initial|inherit; 例 font-variantプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style