:hover を使用して別のクラスの CSS を変更するにはどうすればよいですか?

:hover を使用して別のクラスの CSS を変更する方法

あるクラスの CSS を変更したい場合があります。 CSS のみを使用して別のクラスの要素にマウスを移動したとき。このテクニックは、JavaScript に依存せずに視覚的に魅力的な効果を作成したい場合に特に役立ちます。

CSS のみのソリューション:

CSS のみを使用してこの効果を実現するには、次の方法があります。は 2 つの主なアプローチです。

• 変更する要素 (F) は、カーソルを置いた要素の子要素 ​​(E) であるか、
• F は後の要素です。 E の兄弟または子孫 (E はマークアップ/DOM で F の前に表示されます)。

最初のオプション: F は E の子として指定されます

If Fが E の子要素である場合、次の CSS セレクターを使用できます:

<code class="css">.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}</code>

このセレクターは、.item 要素にカーソルが置かれている場合にのみ、指定された CSS ルールを .wrapper 要素に適用します。

2 番目のオプション: E の兄弟としての F

F が E の兄弟要素である場合、次の CSS セレクターを使用できます:

<code class="css">.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}</code>

このセレクターは、.wrapper が .item の直接の兄弟であると仮定して、.item 要素にカーソルが置かれている場合にのみ CSS ルールを .wrapper 要素に適用します。 .wrapper が .item の直接の兄弟であり、間に他の要素が存在しない場合は、 .item:hover .wrapper を使用することもできます。

JavaScript 解決策:

CSS だけを使用して目的の効果を達成することはできない場合は、JavaScript に頼ることができます。簡単な例を次に示します。

<code class="javascript">document.getElementsByClassName('item')[0].onmouseover = function() {
    document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
};</code>

この JavaScript コードは、.item 要素にカーソルを置いたときに .wrapper 要素の背景プロパティを変更します。このソリューションは、CSS のみのアプローチほど効率的または洗練されていないことに注意してください。

結論:

CSS または JavaScript を使用すると、1 つのクラスの CSS を変更できます。別のクラスのホバリングに基づいています。 CSS のみのソリューションは効率性とシンプルさの点でより望ましいですが、CSS が十分ではない場合には JavaScript を使用できます。

以上が:hover を使用して別のクラスの CSS を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。