19

そのようにnth-childでホバーを使用できるかどうか疑問に思っていました

#gallery a img:hover {
    display: block;
    height:300px;
    width:450px;
    position:absolute;
    z-index:99;
    margin-left:-112.5px;
    margin-top:-75px;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

}

ここからこのようなものまで、機能していないだけです

 #gallery a img:hover:nth-child(1n+4) {
        display: block;
        height:300px;
        width:450px;
        position:absolute;
        z-index:99;
        margin-left:-112.5px;
        margin-top:-75px;
        -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

    }
4

2 に答える 2

23 
#gallery a:hover:nth-child(1n+4)

正しく動作しますが、内部の IMG の代わりに A タグのスタイルを設定します。

次のようなマークアップがある場合...

<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>

A タグ内に IMG が 1 つしかないため、内側の IMG を選択して nth-child を適用しようとすることはできません。

私が作成した JSFIDDLE を参照してくださいhttp://jsfiddle.net/fXS93/2/

IMG マークアップのラップ方法を変更すると、CSS マッチングと NTH-CHILD 計算がリセットされます。これは、IMG のすべてが共有する CLASS でマッチングしている場合でも適用されます。

これは、最新の FF、Chrome、および IE9 に当てはまります。

于 2013-01-08T15:22:01.800 に答える
0

どのブラウザでこれを試しましたか？数式を実行した要素はいくつですか？親要素の3番目の要素から実行され、 次のようにn番目の子の後に 追加する必要があります ： IE8 以前では機能しませんが編集： 試してみましたが、順序は前に置くことができる結果に影響しませんでした
:hover
:nth-child(1n+4):hover


:hover:nthchild()

于 2013-01-08T09:46:43.387 に答える