Question

我想知道是否可以像第二个孩子一样使用悬停

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

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

的JSFIDDLE

IMG标记的包装方式的任何变化都将重置CSS匹配和NTH-CHILD计算。即使您匹配所有IMG共享的CLASS，这也适用。

最新的FF，Chrome和IE9都适用。

Answer 2

你在哪个浏览器中试过这个？以及你运行公式的元素数量？它将从您父元素 AND 中的第三个元素开始运行你应该添加:hover
在这样的第n个孩子之后：:nth-child(1n+4):hover
虽然它不适用于IE8或更早版本修改
我尝试过，订单不会影响您可以:hover

之前放置:nthchild()的结果

与一个n孩子一起盘旋

2 个答案: