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>都悬停，它也会为相关的div设置背景位置......目前h2 span的悬停只有在你输入它的时候才有效如果你输入相关的李......我希望它改变位置......任何想法？

干杯，格雷格。

Answer 1

可能有点混淆我的一面，但最后我需要将背景位置的ref点与第n个孩子对齐，而不是目前使用的div ... ...

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

那是一种享受！公平对待我

悬停时css背景位置变化

1 个答案: