CSSによるボタンイベントの追加について（CSSマウスクリックイベントの書き方）-コンピュータ知識-php.cn

CSSによるボタンイベントの追加について（CSSマウスクリックイベントの書き方）

王林

リリース： 2024-02-12 13:20:39

転載

1047 人が閲覧しました

CSSによるボタンイベントの追加について（CSSマウスクリックイベントの書き方）

ainer\">

Web ページにマウス効果を設定する必要があることがよくあります。リンクリンクなど、一部は自動的に生成されます。その後、マウスが上に移動すると、自動的にクリック用の手になります。入力ボックスがある場合、マウスが自動的に英語の大文字の I に変わることがあります。では、必要に応じてさらに多くのオブジェクトを設定できますか? これは完全に可能です。効果を見てください。

コードの記述:

<div onmouseover=\"this.className=\'over\';\"><div onmouseover=\"this.className=\'over\'; this.id=\'over\';\"><div onmouseover=\"this.style.background=\'url(bj.png) no-repeat\';\" onmouseout=\"…;…\">

ログイン後にコピー

その他のマウスイベント:

onClick: マウスクリックイベント (マウスを押して放したときに生成されるイベントを指します)。 )

onDblClick: マウスダブルクリックイベント (マウスをすばやく押して放し、もう一度押すと発生します。)

onMouseDown: マウスプレスイベント (マウスを押したときに発生します)

onMouseUp: マウスリリースイベント (マウスが押された状態からポップアップするまでを指します。)

onMouseMove: マウス移動イベント (マウスをマウスの上で移動することを指します)

onMouseOver: マウスオーバーイベント (ポインタが外側から要素に移動したときに発生します。)

onMouseOut: マウスがイベントから離れたときに発生します (要素の外側からマウスが移動したときに発生します)。マウスが特定の要素を離れる)

onLoad: Loading イベント (画像またはページの読み込みが終了すると発生します。)

onUnload: Unloading イベント (訪問者がページを離れるときに生成されます)。

onScroll: スクロールバーのスクロールイベント (訪問者がスクロールを使用して上下に移動すると生成されます。)

ケース:

このカスタムスタイルを画像に適用します。ブラウザでプレビューすると、画像は白黒になります。別のスタイル「.over」を定義します。このスタイルにはコンテンツがなく、空のスタイルです。スタイルシートのコードは次のとおりです:

<style type=\"text/css\">  .over {}.out {filter: Gray}</style>

ログイン後にコピー

次に追加します。「onMouseOver="this.className='over\'" onMouseOut="this.className='out\'"」を画像タグ (IMG) に追加します。これは、マウスが通過すると、画像がオーバースタイルになることを意味しますこれは通常のカラー画像です。マウスが離れると、画像は白黒画像であるアウトスタイルになります。oMouseOver と onMouseOut はマウスイベントです。this.className="..." はクラス名を意味します。現在のオブジェクトは...、サイズに注意してください JS は大文字と小文字に非常に敏感ですので、書くときは間違えないでください。

効果は完了です。保存後、ブラウザで開きます画像は白黒になります。マウスを上に動かすと画像はカラーに変わります。マウスを離すと画像は白黒に戻ります。想像力を働かせれば、次のようなこともできます。 this.className メソッドによる多くの美しいマウス効果。

マウスポインター:

<span style=\"cursor:crosshair\">十字</span><span style=\"cursor:text\" >文本光标</span><span style=\"cursor:wait\" >等待</span><span style=\"cursor:default\" >默认</span><span style=\"cursor:help\" >问号</span><span style=\"cursor:e-resize\" >左右箭头</span><span style=\"cursor:s-resize\" >上下箭头</span><span style=\"cursor:auto\" >系统自动给出效果</span><span style=\"cursor:url(\'图标的地址\')\" >系统自动给出效果</span>

ログイン後にコピー