html - 悬停时CSS背景位置变化

Question

我有这个 jfiddle http://jsfiddle.net/greggy_coding/zn09vjbv/2/

我正在努力得到它，这样

nth-child(1) :hover h2 span {
  background-position: 0 -100px;

下面的代码不起作用是 jfiddle 中 css 的片段

li:hover .browser * {
    opacity: 1;
    -webkit-transition:opacity 1500ms ease-out;
    -moz-transition:opacity 1500ms ease-out;
    -o-transition:opacity 1500ms ease-out;
    transition:opacity 1500ms ease-out;

}


#privateinfo h2 span {
  background-position: 0 0;
}
#privateinfo :hover h2 span {
  background-position: 0 -100px;
}
#healthcare h2 span {
  background-position: -100px 0;
}
#healthcare:hover h2 span {
  background-position: -100px -100px;
}
#smallorgs h2 span {
  background-position: -200px 0;
}
#smallorgs:hover h2 span {
  background-position: -200px -100px;

}
#associations h2 span {
  background-position: -300px 0;
}
#associations:hover h2 span {
  background-position: -300px -100px;
}
#studentinfo h2 span {
  background-position: -400px 0;
}
#studentinfo:hover h2 span {
  background-position: -400px -100px;
}

li:hover 。浏览器位很好用，但我也想要它，这样如果每个 <li>悬停它还为相关的 div 设置背景位置......目前 h2 span 的悬停只有在你输入它的时候才有效，我希望它在你输入相关的 li 时改变位置......有任何想法吗 ？

干杯，格雷格。

Answer 1

可能有点让我感到困惑，但最后我需要将背景位置的引用点与第 n 个子元素对齐，而不是当前使用的 div soooo ...

li:nth-child(1) h2 span {
  background-position: 0 0;
}
li:nth-child(1):hover h2 span {
  background-position: 0 -100px;
}

真是太棒了!公平对待我