インターネットをよくサーフィンする友人は、一部の Web サイトのマウスが通常の斜め上向き矢印の形ではなく、十字形、左矢印、疑問符などの形をしていることに気づいたことがあるでしょう。さまざまな機能領域を反映するために、Web ページ上のさまざまな位置にさまざまな形状をマウスで表示したい場合は、Web サイトに独自のスタイルを反映させたい場合は、マウス スタイルの調整を検討してください。実際、マウス スタイルには幅広い用途があります。では、さまざまなマウス スタイルを実装するにはどうすればよいでしょうか? Dreamweaver を起動し、マウス スタイルを適用する Web ページを開き、メイン ウィンドウで [テキスト] ドロップダウン メニューを選択します。次に、[CSS スタイル] サブメニューで [新規] を選択し、[スタイル] コマンドで新しいスタイル シートを作成します。 (注: Web ページにスタイル シートがすでに存在する場合は、[CSS スタイル]、[スタイル シートの編集] を選択してスタイル シートを編集できます。) [新しいスタイル] ダイアログ ボックスが表示されます。 [タイプ] 項目には、[カスタム スタイルの作成]、[HTML タグの再定義]、および [CSS セレクターの使用] の 3 つのラジオ ボタンがあります。このうち、Make Custom Style はカスタム スタイルで、スタイル名はドットで始まります。Use CSS Selector は、4 つのハイパーリンク スタイル
a:active/a:hover/a:link/a:visited を含む CSS セレクターを使用します。 ; Redefine HTML Tag は、abodybr などの HTML システムタグを定義するスタイルです。このページのハイパーリンクにマウス スタイルのみを設定すると仮定します。ここでは、[HTML タグの再定義] オプションで a タグを選択します。以下の「定義」項目で「このドキュメントのみ」を選択します。 「OK」ボタンをクリックします。 [スタイル定義] ダイアログ ボックスが表示され、ハイパーリンクのスタイル設定を入力します。左側のカテゴリはスタイル カテゴリです。ここではその他の項目については説明しません。ここでは Extensions 項目を選択します。右側の視覚効果にカーソル項目が表示されます。これはマウスのスタイルを設定するためのキー項目です。右側のドロップダウン メニューをクリックし、必要なマウス スタイルを選択して、[OK] ボタンをクリックします。 それぞれのスタイルの一般的な意味について説明しましょう。
hand: 見慣れた手の形です。
クロスヘア: リトルタートルのホームページで使用されている十字型のものです。
text: テキスト上にマウスを移動したときのスタイルです。
wait: 待機の効果です。
デフォルト: デフォルトの効果です。
help: は疑問符付きのマウス スタイルです。
e-resize: は右矢印です。
ne-resize: は右上向きの矢印です。
n-resize: は上向きの矢印です。
nw-resize: は左上向きの矢印です。
w-resize: 左への矢印パスです。
sw-resize: は左下向きの矢印です。
s-resize: は下向きの矢印です。
se-resize: は右下を指す矢印です。
auto: システムの自動効果です。
もちろん、必要に応じて他のタグにスタイルを適用したり、テキストの特定の段落に単純にスタイルを適用したりすることもできます。読者が CSS コードに精通している場合は、コードを手動で直接記述した方が便利な場合があります。特に、場所ごとに異なるマウス スタイルを使用する場合や、タブごとに異なるマウス スタイルを使用する場合に便利です。特定のタグにスタイルを直接記述するだけです。
メソッドは <tag style=cursor:mouse_style> です。ここで、tag はタグ名、mouse_style はマウス スタイル (hand/crosshair/text/wait など) です。
マウスのスタイル設定についての理解を深めるために、具体的な例を挙げてみましょう。
<span style=cursor:hand> hand: 見慣れた手の形です。 </span>
< span style=cursor:crosshair>crosshair: Little Turtle のホームページで使用されているスタイルである十字線です。 < /span>
< span style=cursor:text>text: は、通常、マウスをテキストに移動するスタイルです。 < /span>
< span style=cursor:wait>wait: 待機の効果です。 < /span>
< span style=cursor:default>default: デフォルトの効果です。 < /span>
< span style=cursor:help>help: は、疑問符の付いたマウス スタイルです。 < /span>
< span style=cursor:e-resize>e-resize: は右向きの矢印です。 < /span>
< span style=cursor:ne-resize>ne-resize: は右上向きの矢印です。 < /span>
< span style=cursor:n-resize>n-resize: は上向きの矢印です。 < /span>
< span style=cursor:nw-resize>nw-resize: は左上向きの矢印です。 < /span>
< span style=cursor:w-resize>w-resize: 左への矢印パスです。 < /span>
< span style=cursor:sw-resize>sw-resize: は左下向きの矢印です。 < /span>
< span style=cursor:s-resize>s-resize: は下向きの矢印です。 < /span>
< span style=cursor:se-resize>se-resize: は右下向きの矢印です。 < /span>
< span style=cursor:auto>auto: システムの自動効果です。 </span>
上記のコードを Web ページにコピーし、F12 キーを押してプレビューします。対応するテキストの上にマウスを移動すると、マウスに何が起こるか確認してください。対応するスタイルで表示されますか?