ホームページ ウェブフロントエンド htmlチュートリアル CSS の onmouseover と hover の違いは何ですか?

CSS の onmouseover と hover の違いは何ですか?

Jun 28, 2017 am 10:50 AM
hover

hover にはオブジェクト上にマウスを移動すると同時にオブジェクトからマウスを移動する処理が含まれており、対応するサブクラスも選択されます。

mouseover は、マウスがオブジェクトの上を通過すると、そのオブジェクトを含まないすべてのサブクラスが同時に選択されることを意味します。

主な違いは、イベント ドライバーがホバー要素のサブクラスにも追加されることです。また、マウスオーバーではイベント ドライバーが現在の要素に追加されるだけです。

そして、hover イベントには、mouseover イベントが含まれています


mousemove(fn);

一致する各要素の Mousemove イベントにハンドラー関数をバインドします。

hover(over, out);

ホバー イベント (マウスがオブジェクトの上を移動したり、オブジェクトの外に移動したりする) をシミュレートするメソッド。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。

マウスが一致する要素上に移動すると、指定された最初の関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。さらに、マウスがまだ特定の要素内にあるかどうかの検出 (サブクラスの検出) が伴います。そうである場合、マウスは移動イベント (mouseout) をトリガーせずに「ホバー」状態を維持します。

$("td").hover( function () { $(this).addClass("ホバー"); }、 関数 () { $(this).removeClass("hover"); });

jquery ソース コードには次のような段落があります:
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

つまりホバリングしてください! = マウスオーバー + マウスアウト。ただし、hover = マウスエンター + マウス離れる。

以前は、hover、link、visited、active などの疑似クラスは a タグにのみ適用できること、つまり、a:hover、a:link、a:visited、と記述する必要があることしか知りませんでした。 a:アクティブです。実際、これら 4 つのことは、他の定義に割り当てられた他の HTML タグやクラスにも適用できます。

CSS 疑似クラスの詳細については、次を参照してください: http://www.w3school.com.cn/css/css_pseudo_classes.asp

a:link {color: #FF0000} /* 未訪問のリンク*/

a: 訪問済み {color: #00FF00} /* 訪問済みのリンク*/

a:hover {color: #FF00FF} /* マウスをリンクに移動*/

a:active {color: #0000FF} /* 選択済みリンク*/


以上がCSS の onmouseover と hover の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CSS ヒント: トランジションを使用してホバー状態を保持する CSS ヒント: トランジションを使用してホバー状態を保持する Sep 27, 2022 pm 02:01 PM

ホバー状態を保存するにはどうすればよいですか?以下の記事ではJavaScriptを使わずにホバー状態を保持する方法を紹介していますので、ご参考になれば幸いです。

体験は飛んでいます。Haval X1 カメラで飛行してみませんか 体験は飛んでいます。Haval X1 カメラで飛行してみませんか Jan 15, 2024 pm 02:21 PM

インターネット上では素晴らしいトップダウン動画がたくさん見られますが、ドローンで撮影された映像は確かに衝撃的ですが、実際にはドローンについての理解が浅い人が多いのが現状です。飛行が制限されている場所はどこですか?実際、すぐに飛行できる「ドローン」が現在の主流であり、多くの人が選択する価値のあるドローンです。今日は Harvest Flying Camera X1 を実際に体験していただきます。外観では、Harvest Flying Camera X1は初の折りたたみデザインを採用しており、カメラ全体の重さはわずか125gで、携帯電話よりも軽く、折りたたんだ後は手に持ってカバンに入れても圧迫感がありません。 。 4つの柔らかい染め葉と安全フレームの設計が撮影の安全を完全に保護します。 Dyed Leaf は、弾性が高く、耐久性があり、安全で環境に優しいバイオベースの生物学的基材を革新的に使用しており、離陸時と着陸時に手を保護する完全保護フレームも備えています。

CSSでホバーイベントを削除する方法 CSSでホバーイベントを削除する方法 Feb 01, 2023 am 10:06 AM

CSS ホバー イベントを削除する方法: 1. "$("a").hover(function(){alert('mouseover'); }, function(){ 「alert('mouseout'); })」メソッドを使用してホバー イベントをバインドします。 2. 「$('a').off('mouseenter').unbind('mouseleave');」メソッドを使用してホバー イベントのバインドを解除します。できる。

HTMLにおけるホバーの役割 HTMLにおけるホバーの役割 Feb 20, 2024 am 08:58 AM

HTML におけるホバーの役割と具体的なコード例 Web 開発では、ホバーとは、ユーザーが要素の上にカーソルを置いたときにいくつかのアクションや効果をトリガーすることを指します。これは、CSS :hover 疑似クラスを通じて実装されます。この記事ではホバーの役割と具体的なコード例を紹介します。まず、hover を使用すると、ユーザーが要素上にマウスを移動したときに要素のスタイルを変更できます。たとえば、ボタンの上にマウスを置くと、ボタンの背景色やテキストの色を変更して、次に何をすべきかをユーザーに思い出させることができます。

なぜホバーは擬似要素なのでしょうか? なぜホバーは擬似要素なのでしょうか? Oct 09, 2023 pm 05:45 PM

Hover は擬似要素ではなく、擬似クラスです。疑似クラスは要素の特定の状態や動作を選択するために使用され、疑似要素は要素の特定の部分にスタイルを追加するために使用されます。 :hover は、要素の特定の部分にスタイルを追加するのではなく、要素の特定の状態を選択するために使用されるため、:hover 疑似クラスを使用して要素のマウスオーバー状態のスタイルを設定することができます。また、:hover を使用することもできます。リンクにホバー効果を追加する疑似クラス。リンク上にマウスを置くと、リンクの色、背景色などが変化します。

CSSでホバーを使う方法 CSSでホバーを使う方法 Feb 23, 2024 pm 12:06 PM

CSS の hover 疑似クラスは、マウスが要素上にあるときに要素のスタイルを変更できるようにする非常に一般的に使用されるセレクターです。この記事では、ホバーの使い方を紹介し、具体的なコード例を示します。 1. 基本的な使用法 hover を使用するには、まず要素のスタイルを定義し、次に :hover 疑似クラスを使用して、マウスがホバーしているときに対応するスタイルを指定する必要があります。たとえば、ボタン要素があるとすると、ボタンの上にマウスを置くと、ボタンの背景色が赤に、テキストの色が白に変わります。

CSSでホバーを使う方法 CSSでホバーを使う方法 Nov 24, 2023 am 10:32 AM

CSS では、:hover は、マウス ポインターが上にある要素を選択するために使用される疑似セレクターです。 :hover を使用すると、ユーザーが要素の上にマウスを移動したときにスタイルの変更を適用できます。

jQueryのhover()メソッドの使い方 jQueryのhover()メソッドの使い方 Dec 04, 2023 am 09:56 AM

hover() は jQuery で一般的に使用されるメソッドです。2 つのイベント処理関数をバインドするために使用されます。これら 2 つの関数は、マウス ポインタが一致する要素に出入りするときに実行されます。基本的な使い方は「$(selector).hover(inFunction,outFunction);」です。

See all articles