2

なぜこれが機能しないのですか？私の推測では、ターゲティングする要素が何であれ、その親を通過する必要があります。私は正しいですか、それともトリックはありますか？(jquery なし)

フィドルをチェックアウト: http://jsfiddle.net/eMw5C/

HTML

これは機能しません

トライガン 

    <h1>This Works</h1>
    <div class="yes-working">
        <img src="https://i158.photobucket.com/albums/t109/hp_arianepotter/trigun-1.png" />
        <a href="javascript:void(0);">Trigun</a>
    </div>

    /* This doesn't work */
    .not-working img { width: 10em; clear: both; }
    .not-working img:hover a { color: red; }
    .not-working a { color: black; }
    .not-working a:hover { color: red; }

    /* This works */
    .yes-working img { width: 10em; clear: both; }
    .yes-working:hover a { color: red; }
    .yes-working a { color: black; }
    .yes-working a:hover { color: red; }
4

4 に答える 4

1

動作しない例では、アンカー タグは img タグの子ではありません。

.not-working img:hover a { color: red; }

次のようにする必要があります。

.not-working img:hover ~ a { color: red; }

ここで動作します: http://jsfiddle.net/eMw5C/1/

于 2013-07-17T01:47:51.110 に答える
0

その働き：

.not-working img { width: 10em; clear: both; }
.not-working:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }

http://jsfiddle.net/aldiunanto/eMw5C/2/

于 2013-07-17T01:51:04.907 に答える
0

.not-working img:hover aアンカータグ<a>がタグの内側にあることを意味するため、imgこれは真実ではありません。これは 2 番目のケースに当てはまり、それが機能している理由です。

于 2013-07-17T01:48:11.210 に答える