ATOZ CSSスクリーンキャスト：ホバー擬似クラス

コアポイント

:hover pseudo-classは、マウスがリンクとボタンの上にホバリングしているときに視覚的なフィードバックを提供するための実用的なツールです。要素の色、サイズ、または向きを変えるなど、さまざまな方法でスタイルできます。ただし、タッチデバイスでの信頼性は一貫しておらず、重要な情報を非表示にするために使用すべきではありません。 他の擬似クラスを使用して、ユーザーブラウザ履歴のリンクのリンク、リンクのリンク、および現在キーボードフォーカスリンクのリンクの場合は :visited など、さまざまなリンク状態のスタイルを設定できます。これらをリセットスタイルシートに組み合わせて、プロジェクトのデフォルト値を設定できます。 :active :focus pseudo-classを使用して、ウェブサイトのメインナビゲーションにドロップダウンメニューを作成することもできます。これには、トップメニュー項目の上にホバリングするときに、サブメニューの プロパティを切り替えることが含まれます。このインタラクションをタッチデバイスでうまく機能させるには、JavaScriptを使用してHoverイベントをクリックイベントに変換できます。 :hover display ビデオ説明概要 このビデオでは、テキストリンクに pseudoクラスの適用を検討し、他のリンク擬似クラスを紹介します。さらに、非マウスユーザーのソリューションのいくつかの欠点について説明します。最後に、

でトリガーされたCSSドロップダウンメニューを作成し、jQueryを使用してタッチデバイスの互換性を高めます。 :hover :hover リンクスタイル :hover

最も一般的な用途は、リンクとボタンのマウスでユーザーに視覚的なフィードバックを提供することです。

リンクのステータスは、次のようにCSSを使用して設定できます。 :hover

コロンの後の は擬似クラスを表します。このビデオとこのシリーズの残りの部分では、多くの擬似クラスをカバーします。「エピソード5：IDセレクター」で :hover および

擬似クラスを表示できます。 a:hover { color: red; } この例では、カラースタイルのみが設定されますが、属性は変更、上書き、またはキャンセルできます。必要に応じて、フォントサイズを増やしてリンクを180度回転させることができますが、これは推奨されません。 a さまざまなリンク状態のスタイルに使用できる他の擬似クラスもいくつかあります。 :enabled :disabled

ユーザーのブラウザ履歴のリンクのスタイルに使用されます。 現在クリックしているリンクのスタイルに使用されます。現在キーボードのフォーカスがあるリンクをスタイリングするために使用されます。つまり、ユーザーはタブキーを使用して、ページ上のクリック可能なアイテム（リンクやフォーム入力など）にジャンプします。

スタイルシートをリセットしてプロジェクト全体の合理的なデフォルト値を設定するために、これらの4つのリンク状態を組み合わせることが好きです。

:visited :active 短所 :focus

ステータスは、リンクだけでなく、任意の要素に適用できます。これにより、非常に普遍的になります。しかし、タッチデバイスには、 a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } を作動させるマウスはありません。

ユーザーがリンクまたはボタンに触れた場合、 :hover スタイルが適用されることもありますが、これは信頼できず、プラットフォームやデバイス間で一貫性がありません。これはしばしば非常に混乱を招く可能性があり、私たちの仕事はユーザーエクスペリエンスを改善することであり、悪化させることではありません！

タッチデバイスの場合は、 :hover 相互作用の背後に重要な情報を隠すことを避けてください。これができない場合は、JavaScriptを使用して :hover をクリックイベントに置き換えることができます。

一部のユーザーはマウスを使用できません。 :hover を使用するときは :focus および :active スタイルを常に適用することで、体験を改善できます。次のように、CSSのコンマでそれらを分離できます。

a:hover { color: red; } SASSのようなCSSプリプロセッサを使用する場合、毎回それらを書き出すことなく、これらの3つのコンマ区切りの擬似クラスを出力するミックスインを作成できます。

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } 状態ベースのスタイルは、フォーカス可能またはアクティベート可能な要素とのキーボードの相互作用中に表示されるようになりました。

cssドロップダウンメニュー

リンクやボタンと対話するときに視覚的なフィードバックを提供するために、 の基本的な使用法が見られました。ウェブ上のもう1つの一般的なデザインパターンは、Webサイトのメインナビゲーションのドロップダウンメニューです。 :hover

より複雑なCSSセレクターを使用してサブメニューを表示および非表示にすることにより、 を使用して対話できます。このインタラクションがタッチデバイスでうまく機能するためには、 :hover イベントをクリックイベントに変換するために少量のJavaScriptが必要ですが、後でカバーします。 :hover トリックは、トップメニュー項目の上にホバリングするときに、サブメニューの

属性を切り替えることです。 はCSSセレクターであるため、他のセレクターと組み合わせて、より複雑な動作を作成できます。 display 属性の詳細については、「エピソード4：show」をご覧ください。 :hover この例では、各リンクの下にサブメニューを備えた水平に順序付けられていないリンクリストがあります。サブメニューは別の順序付けられていないリストですが、リスト項目は互いに積み重ねられています。 display

このCSSは、この初期レイアウトを設定します。色とフォントのプロパティは、作業領域をきれいに保つために私の ファイルに移動されました。

page-styles.css

を使用してサブメニューを非表示にし、メニュー項目の上にホバリングするときに a:hover, a:focus, a:active { /* styles */ } に設定できます。 display: none display: block これにはすべてのサブメニューが表示されますが、このセレクターを調整して、 @mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } サブメニューが突然または隠されていないことを好む場合は、より進行性のフェード効果を得るために > と

を組み合わせることができます。私はそれをエクササイズとして残して、自分で試してみましょう - 私はあなたの作品を見たいです。 .menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; } このドロップダウンメニューをタッチデバイスで適切に動作させるために、JavaScriptを追加できます。このjQueryスニペットは、ホバリングする代わりにクリックするとドロップダウンメニューをアクティブにします。

このタッチデバイスのメニューを含む作業例jQueryは、Codepenで見つけることができます。 a:hover { color: red; }

faq CSSにおける

、 、および :hover :focus :active 、 、および は、さまざまなユーザーインタラクションに適用されるCSSのすべての擬似クラスです。 :hover ユーザーが有効化せずに要素を覆うと、擬似クラスが発射されます。 :focus 要素がフォーカスを取得すると、擬似クラスが適用されます。通常、ユーザーは入力要素をクリックするか、キーボードを使用してそれに移動します。 :active ユーザーが要素をアクティブにするとすぐに擬似クラスが適用されます（リンクやボタンをクリックするなど）。 :hover :focus :active

さまざまな要素に pseudo-classを使用する方法は？ :hover pseudoクラスは、リンクだけでなく、任意のHTML要素で使用できます。ボタンの外観、フォームフィールド、画像、およびユーザーがマウスを覆う他の要素を変更するために使用できます。たとえば、次のCSSを使用して、ユーザーがマウスをhotingるボタンの背景色を変更できます。 :hover

複数の擬似クラスを組み合わせることができますか？ a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } はい、複数の擬似クラスをリンクして、より具体的なセレクターを作成できます。たとえば、 と pseudoクラスを組み合わせて、リンク上にホバリングしたり、リンクにフォーカスがあるときに外観を変更できます。 :hover :focus

擬似クラスはタッチデバイスでどのように使用されますか？ a:hover, a:focus, a:active { /* styles */ } タッチデバイスでは、カーソルがないため、ホバリングの概念はありません。ただし、一部のタッチデバイスは、ユーザーが要素に触れたときに :hover 擬似クラスをトリガーします。注意していない場合は、これが予期しない動作につながる可能性があるため、効果を設計するときはデバイスに触れることを確認してください。 CSSアニメーションを備えた :hover pseudo-classを使用できますか？ :hover

はい、 この例では、ユーザーがその上に浮かぶと、リンクの色が青から赤にスムーズに移行します。 :hover この改訂された出力は、入力のより包括的で言い換えられたバージョンを提供し、元の意味と画像の位置を維持します。

ATOZ CSSスクリーンキャスト：ホバー擬似クラス

関連記事