ホームページ > ウェブフロントエンド > フロントエンドQ&A > HTMLでマウスの形状を変更する方法

HTMLでマウスの形状を変更する方法

藏色散人
リリース: 2021-04-13 14:39:33
オリジナル
4706 人が閲覧しました

htmlマウスの形状を変更する方法: 1. CSS のカーソル属性を使用して、マウス ポインターの形状を変更します (「.a{ カーソル:ハンド }」などのコード)。 2. 3 番目のコードを使用します。パーティー コントロールを使用して、マウス ポインターの形状を変更します。

HTMLでマウスの形状を変更する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS/HTML マウス ポインターの形状を変更する

マウス ポインターの形状を変更するには 2 つの方法があります。1 つ目: CSS カーソル属性を使用するマウスポインタの形状を変更します。もう 1 つは、サードパーティ コントロールの使用です。私が最も頻繁に使用するのは 1 つ目です。css スタイル シート を使用して、マウス ポインター の形状を変更します。まず最初のものを見てください。カーソル属性を使用して、

マウス ポインタ

の形状を変更します。 リンクを追加するのにテキストや画像が必要ない場合や、リンクを追加するときにマウス スタイルが必要な場合もあります。これは、

css スタイル シート

を使用して、マウス ポインターの形状を作成します。次の CSS マウス ポインター css スタイル シート のプロパティをいくつか設定してください:

Default # デフォルトテキスト/編集テキスト##自動move許可されません#ノードロップ#nw-resizeサイズを左と下に変更 (南西) sw-resize右上 (北東) にサイズ変更します ne-resize sw-resize と同じ効果サイズを右と下 (南東) に変更しますse-resize と nw- サイズ変更の効果は同じです##カスタム カーソル

##自動

##手の形状
ポインタ、 hand (hand は IE 専用)

#モバイル オブジェクト

##許可されません

リリースできません

待機/砂時計

##待機

ヘルプ

ヘルプ

クロスヘア

十字線

上(北)にサイズ変更

n-サイズ変更

サイズを下方向 (南) に変更します

s_resize は n-resize と同じ効果があります

左 (西) にサイズ変更します

w-resize

サイズを右 (東) に変更します

e-resize は w-resize と同じ効果があります

左上 サイズを変更 (北西)

url('cursor住所')####### ########

上記は マウス ポインタ の形状を変更する css スタイル シート です。どうやって応用すればいいのでしょうか?例を使用して説明します:

<style type="text/css">   
.a{ cursor:hand }   /*这里边的curusor的值可以是以上表中的任何值,或是你自己定义*/</style>
<p class=”a”>欢迎您到XXX来做客</p>
ログイン後にコピー

p タグ内にスタイル シートを直接記述することもでき、効果は同じです。例:

<p style=”cursor:help;”>欢迎您到XXX来做客</p>
ログイン後にコピー

別の使用方法もあります。原則は、CSS2のcursor属性、cursor: url(url)を使用し、マウスファイルはjpg、gif、ani、curなどのさまざまなファイル形式を使用できます。なお、この方法はIE5.5以上のブラウザでのみ正常に表示できます。

#[推奨学習:

HTML ビデオ チュートリアル]

マウス ポインターの形状を変更する 2 番目の方法: サードパーティ コントロールを使用する方法

これ この方法は非常に簡単です。次のコードを Web ページ ファイルの
に追加するだけです:


<script language=>var Loaded=false;var Flag=false;</script>
<script src=&#39;http://files.cometsystems.com//lc2000.js&#39;
language=></script>
<script language=>if(Loaded&&Flag)TheCometCursor(&#39;cd_electric&#39;,0,626);</script>
ログイン後にコピー
変更後、ブラウザは「セキュリティ設定の警告」をポップアップ表示し、「はい」をクリックすると、システムがコントロールを自動的にインストールし、必要に応じてマウスを表示できます。

それでは、必要なマウス スタイルを選択するにはどうすればよいでしょうか?まず、Web サイト http://www.cometzone.com にログオンします。この Web サイトには、14 の主要カテゴリで 4,000 種類以上のマウスが掲載されています。内容は非常に充実しており、マウス ファイルも美しく作成されています。マウスを選択できます。必要に応じてカテゴリから必要なものを選択し、対応するマウスをクリックすると、マウスの画像をクリックすると、さまざまな効果をプレビューできます。
マウスを選択した後、Web ページの左側のナビゲーションにある [カーソル コードの取得] リンクをクリックし、次のページに移動して、[コードの選択] ボタンをクリックします。複数行のテキスト ボックスの内容ボタンの下は上で提供したコードです。コードの TheCometCursor('cd_electric',0,626) の部分だけが異なり、表示されるマウスのステータスも異なります。

以上がHTMLでマウスの形状を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート