html - div要素内の画像をホバーすると、別のdiv要素を取得しますか？

Question

したがって、CSSではこれが可能です。

#Something1:hover .Something22 {...}

しかし、私がそれをこのように置くとき：

#Something1 img:hover .Something22 {...}

動作しません。これは画像だけで可能ですか？

Answer 1

#Something1 img:hover .Something22 {...}

クラスSomething22を持つ要素が要素内にあることを意味しますimg。これは有効ではありません。

クラスの要素がSomething22画像の直後にある場合は、

#Something1 img:hover + .Something22 {...}

または、画像がクラスの場合Something22、これが必要です：

#Something1 img.Something22:hover {...}

Answer 2

img要素が子孫を持つことはできないため、後者は機能しません。それは単に無効なHTMLです。

HTML構文の仕様を引用するには（私の強調）：

void要素は、コンテンツモデルがいかなる状況でもコンテンツを持つことを決して許可しない要素です。ボイド要素は属性を持つことができます。

以下は、HTMLのvoid要素の完全なリストです。

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

Answer 3

その理由は、最初のセレクターが次の理由によるものです。

#Something1:hover .Something22 {...}

Something22ホバーされている間にIDを持つ要素内にあるクラスを持つアイテムを選択しますSomething1。

2番目のクラスSomething22は、画像内にあるクラスのアイテムを選択します。画像に別の要素を含めることはできないため、2番目のセレクターは機能しません。

Answer 4

さて、あなたはjQueryを使うことができます

$('#Something1 img').hover(
    function(){
        // do you stuff with Something22 here
    },
    function(){}
);