CSS 悬停第 n 个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14203823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hover with a nth-child
提问by Ivo
i was wondering if it is possible to use a hover with a nth-child like so
我想知道是否可以像这样对第 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);
}
From this up here to some thing like this down here, only its not working
从这里到这里像这样的事情，只是它不起作用
#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);
}
回答by Louis Ricci
#gallery a:hover:nth-child(1n+4)
Will work correctly but style the A tags instead of the IMG inside.
将正常工作，但样式 A 标签而不是内部的 IMG。
When you have markup like...
当你有像...
<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>
You cannot select the inner IMG and then try to apply an nth-child on it because there is only 1 IMG inside of the A tag.
您不能选择内部 IMG，然后尝试在其上应用第 n 个子代，因为 A 标签内只有 1 个 IMG。
Refer to the JSFIDDLE I created http://jsfiddle.net/fXS93/2/
参考我创建的 JSFIDDLE http://jsfiddle.net/fXS93/2/
Any change in how the IMG markup is wrapped will reset the CSS matching and NTH-CHILD calculation. This applies even if you are matching on a CLASS that all of the IMG share.
IMG 标记包装方式的任何更改都将重置 CSS 匹配和 NTH-CHILD 计算。即使您匹配所有 IMG 共享的 CLASS，这也适用。
This is true for the latest FF, Chrome, and IE9.
这适用于最新的 FF、Chrome 和 IE9。
回答by Homam
in which browser did you tried this?
and on how many elements did you run the formula?
it will run from the third element in your parent element AND
you should add :hover
after the nth-child like this::nth-child(1n+4):hover
although it wont work in IE8 or earlier
EDIT:
i tried and the order did not affect the result you can put :hoverbefore the :nthchild()
你在哪个浏览器中试过这个？你在多少个元素上运行了这个公式？它将从第三个元素的父元素运行与
你应该添加 :hover
这样的第n个孩子后：:nth-child(1n+4):hover
虽然它不会在IE8或更早的工作
编辑：
我试图和该命令没有影响，你可以把结果:hover前:nthchild()
