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;
}

真是太棒了！公平对待我

css 悬停时背景位置发生变化

css background-position change on hover

html

css

animation

hover