19

我想知道是否可以像这样对第 n 个孩子使用悬停

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

将正常工作，但样式 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。

于 2013-01-08T15:22:01.800 回答
0

您在哪个浏览器中尝试过这个？你在多少个元素上运行了这个公式？它将从父元素中的第三个元素运行，并且您
应该 :hover
像这样在第 n 个子元素之后添加：:nth-child(1n+4):hover
尽管它在 IE8 或更早版本中不起作用
编辑：
我尝试过并且该顺序不会影响您可以:hover放在:nthchild()

于 2013-01-08T09:46:43.387 回答