悬停在第n个子元素上

Question

我在想是否可以像这样使用:hover和:nth-child:

我在想是否可以像这样使用:hover和: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);

    }

- Ivo

---

你试过了吗？你可以使用jsfiddle.net。 - Louis Ricci

是的，我在我的一个脚本上尝试过了，但它就是不起作用。 - Ivo

展示一下你尝试过的内容。 - BoltClock

有相同问题的人请注意，我的情况是我错误地使用了 a::hover:nth-child() 而不是 a:hover:nth-child() （请注意在 hover 时只使用一个 :），这样就可以正常工作了。 - aderchox

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然后尝试在它上面应用nth-child，因为A标签里只有一个IMG。

请参考我创建的JSFIDDLEhttp://jsfiddle.net/fXS93/2/

任何对IMG包装方式的更改都会重置CSS匹配和NTH-CHILD计算。即使您匹配所有IMG共享的CLASS也是如此。

这适用于最新的FF、Chrome和IE9。

- Louis Ricci

---

非常感谢，li:hover:nth-child 起作用了，而 li:nth-child :hover 却不起作用。 - Ashish Kamble

Answer 2

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

- Homam

---

顺序不重要。 - BoltClock

我在w3schools的tryit编辑器中尝试了nth-child 链接，是的，顺序不重要，但浏览器和元素数量很重要，如果目标元素少于4个，则不能在鼠标悬停时看到结果。 - Homam

是的，我说顺序并不重要。 - BoltClock