悬停时的CSS背景位置变化答案

【问题标题】：css background-position change on hover悬停时的CSS背景位置变化
【发布时间】：2015-07-18 06:09:35
【问题描述】：

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

我正在努力做到这一点

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

下面的代码不起作用是 jfiddle 中 css 的 sn-p

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，它会改变位置......有什么想法吗？

干杯，格雷格。

【问题讨论】：

从您的帖子中不清楚您要完成什么。另外，如果对你很重要，background-positionis not supported in IE8 and under
嗯，好吧，上面的 css 允许特定 div 的 h2 span 位置改变......这很好，但我希望它像主要位一样悬停在 h2span 上，而不是悬停在 li 上在顶部上方
...IE 8 也仅指 1%/ 的用户：op
我不认为background-position 是您正在寻找的属性。跨度没有任何背景可以定位...是吗？
是的，我正在使用包含翻转图像的图像....它包含在 H2 跨度 css 中，指的是 browser-bg ....您在 jsfiddle 上看不到它虽然我不知道如何上传它......我很确定这是简单的 css 更改但很困惑

标签： html css animation hover

【解决方案1】：

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

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

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

【讨论】：