与一个n孩子一起盘旋

Question

我想知道是否可以使用像这样的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);

    }

Answer 1

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

将正常工作,但设置A标签而不是IMG内部.

当你有像......这样的标记时

<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>

您无法选择内部IMG,然后尝试在其上应用第n个子项,因为A标记内只有1个IMG.

请参阅我创建的JSFIDDLE http://jsfiddle.net/fXS93/2/

包装IMG标记的任何更改都将重置CSS匹配和NTH-CHILD计算.即使您匹配所有IMG共享的CLASS,这也适用.

这适用于最新的FF,Chrome和IE9.