CSSカーソルを別の項目にホバリングするときに、1項目のプロパティを変更します。 poc

次のいくつかの段落では、一般化された関連要素のセレクタ（または〜）とその可能なアプリケーションのセレクタをより詳細に検討したいと思います。
この記事を書くために、私は彼に関する情報の小さな罹患率によって押されました。

それは何ですか？

一般化された関連要素のセレクタの主なタスクは、与えられたアイテムの後に発生し、それと共通の親を持つ要素の選択です。
これをすべて次のようにマードします。
A~B（スタイル）どこ A. そして b - セレクタを定義する文字列値。 スタイル。 - 適用可能なプロパティ。
例
HTML：

題名

字幕1。

それはテキストの段落です

字幕2。

これはスパンで囲まれたテキストです

CSS：
H1~H2（色：赤;）
その結果、ヘッダH2は赤で描かれている。これらはH1を持つ共通の親要素を持ち、その後に立っているコードにあります。

要素がソースの上に立っている場合は、選択されません。

共通の親がオリジナルの要素のみを持つことで、共通の先祖のみが選択されているものではありません。それは第2の例をよく示しています。

例

題名

字幕1。

それはテキストの段落です

字幕2。

これはテキストの2番目の段落です。これは、段落の内側にあるスパンの枠内で囲まれたテキストです。

その結果、赤く区別されるものは何もありません。親要素SPAN - P、および要素H1 - 記事。
スパンが赤くなるためには、段落から1レベルに段階的に取り出すか、またはこれを行う必要があります。

ホバー

私の意見では、すべての私のユーティリティセレクター「A~B」は、以下のような要素のイベントとバンドルに展示しています。
それ以前の場合、マウスポインタをマウスのポインタを合わせるときにのみ要素スタイルを変更することが可能であれば、一般化された関連要素のセレクタを使用することで、起こったイベント以外の要素のスタイルを変更できます。

象徴的に（以下の場合）は次のようになります。
A：ホバー~B（スタイル）どこ A. - マウスポインタがホバリングしている要素 b 新しいスタイルの規則が配布されています。

例

HTML：
この碑文とブロックへのポインタを動かすと緑色になります

ブロック番号1

ブロック番号2。

div（幅：100px;高さ：50px;マージン：5px;背景：グレー;）スパン：Hover~DIV（背景：緑;）

その結果、碑文を訪れる際にブロックは緑色になります。

緑色のカラーでブロック番号2をペイントします
青い色でブロック番号1をペイントします

ブロック番号1

ブロック番号2。

CSS：SPAN（カーソル：ポインタ;）DIV（幅：100ピクセル;高さ：50px;マージン：5ピクセル;背景：グレー;）.SPAN1：HOVER〜。Block2（バックグラウンド：バックグラウンド）：青;）

このように適用できます。
HTML：
ブロックを赤で描く
青い色でブロックをペイントします
ブロックを緑にペイントします

ブロック

CSS：SPAN（カーソル：ポインタ;）DIV（幅：100ピクセル;高さ：50px;マージン：5ピクセル;背景：グレー;）.SPANRED：HOVER~。ブロック（背景：赤;）。スパンブルーム：ホバー〜。ブロック（バックグラウンド）：青;）。スパングリーン：ホバー〜。ブロック（背景：緑;）
デモ

アニメ

非常に興味深い効果は、新しいCSS3の特徴との集合体で達成することができます。例えば、以下の例では、遷移特性が使用される。

例

HTML：
正しい左アップダウン

ブロック

CSS：SPAN（位置：絶対;表示：ブロック;幅：100px;高さ：50px;マージン：10px;背景：銀;カーソル：ポインタ;）.Light（トップ：12％;）。左：40％;）。）.top（左：20％;）.DOWN（TOP：25％;左：20％;）。ブロック（位置：絶対;上：50％;右：50％;幅：100px;高さ：50px;マージン：5ピクセル;グレー; - ウェブキット遷移：すべての2S簡単; -O-遷移：すべての2S容易さ; -MOZ-Transhion：すべての2S簡単;。）。）。 10％;）.LEFT：ホバー〜。ブロック（右：90％;）.top：Hover~。ブロック（上位：10％;）.DOWN：HOVER~。ブロック（上：90％）
デモ

ご覧のとおり、一般化された関連要素のセレクターには、十分な数の興味深い使用方法があります。に最近 CSSは遠くに進歩しており、JavaScriptを使用して以前に可能な限り可能なものを実現することができます。
しかし、私の意見では、類推を行っても、CSSは機械的構成要素（あなたが望むなら - 「鉄」）はロジックを構築することを意図していない。たとえば、JavaScriptは「ソフトウェア」として機能することができます。
したがって、この記事では、一般化された関連要素のセレクタのテーマを明らかにしようとしました。それはあなたを判断するために判明した。

CSSの特定の要素のプロパティを変更するには、セレクタと同じ概念があります。 ：ホバー.
特に普及しています h h カーソルを合わせるときにリンクプロパティを変更する必要があるときに取得します。たとえば、リンクを簡単に強調することができます。これはデフォルトで強調されていません。

レッスン、CSSレシピ

助けを借りて リンク。 そして a：訪問しました ユーザーが以前に渡されたものを含む、すべてのリンクのプロパティを指摘しました（ ：訪問者）。すべてのリンクは緑を獲得し、アンダースコアなしで通常のテキストに似ています。一方 a：ホバー 各ホバリングカーソルとのリンクを強調するための指示を与えます。
同じように、マウスをホバリングするときに縁石画像を追加することができます。

Sを作成する簡単な例記事のタイトルに置かれたよりまれなタスクに変わります。親要素にカーソルをホバリングするときに子要素のプロパティを変更する方法？
状況は非常に簡単に許可されています。最初は、セレクタを持つ親要素が有声されています ：ホバー その後、変換されなければならない子要素の指定があります。

ライブ
じゃあスタイルCSS。学ぶために。

CSSは学ぶ、人生が生きていません。

最初の文を訪れるときは、タグ内のテキスト赤色の赤を強調した。この場合、外部の部分緑色のままです。また、タグの外側にある下部のテキストにカーソルをカーソルに合\u200b\u200bわせると色が変わりません。

.
レシピがより視覚的になったように、ボイスコンクリートをしましょうテクニカルタスク：ブロックがあります div 2つの画像が配置されています。最初のイメージが表示され、2番目に隠されており、マウスをカバーするときにのみ表示されます。 div.
レシピソリューションは簡単です。

：モニター・イメージのカーソルをカーソルを合わせると、左上隅に緑色の影付きの矢印が表示されます。ユーザーが画像からカーソルを削除すると、画像 playButton.png。 また消えます。

デザインを覚えている価値があります div＃ブロック：ホバー 件の場合に適用されます

有る iD \u003d "ブロック" 。クラスになると クラス\u003d»ブロック» ポイントを使う div.Block：Hover. .

PseUDoclasssユーザーのアクションを使用して変更される要素の動的な状態、およびドキュメントツリー内の位置を決定します。そのような状態の例は、マウスカーソルにホバリングするときに色を変えるテキストリンクです。疑似学校を使用する場合、ブラウザは現在の文書を過負荷にしませんので、疑似学校を使用してページに異なる動的効果を得ることができます。

Pseudoclasssのアプリケーションの構文は次にあります。

セレクタ：疑似クラス（スタイルルールの説明）

最初は、セレクタが疑似クラスに追加されているように示されており、コロンはPseUDoclassaの名前に従います。疑似クラスを識別子またはクラスの名前に適用することができます（A.Menu：Hover（Color：Green））、およびコンテキストセレクタには疑似セレクタ（ .menu A：ホバー（バックグラウンド：＃fc0））。疑似クラスがセレクタなし（：Hover）なしで指定されている場合は、文書のすべての要素に適用されます。

条件付きで、すべてのPseudoclasssは3つのグループに分けられます。

要素の状態を定義する。
要素の木に関連しています。
テキストの言語を示す。

要素のステータスを決定するPseudoclasss

このグループには、要素の現在のステータスを認識し、この状態に対してのみスタイルを使用する疑似衝突が含まれています。

：アクティブ

ユーザーが有効になったときに起こります。たとえば、カーソルを見てマウスをクリックすると、リンクはアクティブになります。 Webページのほとんどすべての要素をアクティブにできるという事実にもかかわらず、疑似クラス：Activeは主に参照のために使用されます。

：リンク

それは望ましくないリンク、すなわちユーザがまだ押されていないリンクに適用される。ブラウザはしばらくの間訪問履歴を保存するので、遷移が以前に記録されたため少なくとも基準とマークされます。

（...）とa：link（...）を記録すると、ブラウザが同じ効果があるため、疑似クラス：リンクを表示できません。例外はアクションです。リンクは適用されません。

：焦点を合わせる

フォーカスを受けてアイテムに適用されます。たとえば、テキストフォームの場合、フォーカスレシートはカーソルがフィールドに取り付けられ、キーボードを使用してテキストを入力できます（例15.1）。

実施例15.1。アプリケーションpseudoclass：焦点

HTML5 CSS 2.1 IE CR OP SA FX

poc

実施例の結果を以下に示す（図15.1）。 2行目にカーソルが含まれているため、テキストフィールドはフォーカスを受け取りました。

この例では、テキストフィールドには予備テキストが含まれているため、タグの値の値の値によって決まります。。フォーム要素をクリックすると、フォーカスフィールドが取得され、テキストの色が赤に変わります。ページ内の任意の場所をクリックするのに十分です（もちろんテキストフィールドを除く）、フォーカスロスがどのように発生し、テキストが元の黒い色に戻ります。