CSSでマウスホバーを設定してマウスの形状を変更する方法-CSSチュートリアル-php.cn

CSSでマウスホバーを設定してマウスの形状を変更する方法

WBOY

リリース： 2021-11-29 10:56:07

オリジナル

9555 人が閲覧しました

CSS では、「:hover」セレクターとカーソル属性を使用して、マウスホバーを設定してマウスの形状を変更できます。「:hover」セレクターは、マウスの形状を変更する要素を選択するために使用されます。マウスポインタはフローティングであり、cursor 属性を使用してマウスの形状を指定します。構文は「element:hover{cursor:mouse Shape;}」です。

CSSでマウスホバーを設定してマウスの形状を変更する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css でマウスホバーを設定してマウスの形状を変更する方法

css では、カーソルを使用してマウスの形状を設定できます。そして、cursor 属性は、カーソルのタイプ (形状) を表示することを規定します。

また: ホバーセレクターは、マウスポインターが浮いている要素を選択するために使用されます。

以下の例を見てみましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>123</title>
    <style>
      div{
          width:100px;
          height:100px;
          background-color:red; 
      }
      div:hover{
        cursor:pointer;
      }
   </style>
  </head>
  <body>
      <div></div>
  </body>
</html>

ログイン後にコピー

出力結果:

CSSでマウスホバーを設定してマウスの形状を変更する方法

カーソルの属性値がクロスヘア、例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>123</title>
    <style>
      div{
          width:100px;
          height:100px;
          background-color:red; 
      }
      div:hover{
        cursor:crosshair;
      }
   </style>
  </head>
  <body>
      <div></div>
  </body>
</html>

ログイン後にコピー

出力結果:

CSSでマウスホバーを設定してマウスの形状を変更する方法