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>

CSS の定義と使用法

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

ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。

ヒント: :link セレクターは、訪問されていないページを指すリンクのスタイルを設定します。:visited セレクターは、訪問済みのページへのリンクを設定するために使用され、:active セレクターは、訪問されていないページへのリンクを設定するために使用されます。アクティブなリンク。

注: スタイルを有効にするには、CSS 定義で :hover を :link および :visited (存在する場合) の後に配置する必要があります。

以上がCSSによるボタンイベントの追加について（CSSマウスクリックイベントの書き方）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。