css background-position change on hover

Question

I have this jfiddle http://jsfiddle.net/greggy_coding/zn09vjbv/2/

I am trying to get it so that

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

that code doesn't work below is the snippet from the css in the jfiddle

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

the li:hover . browser bit works great but I also want it so that if each <li> is hovered it also enacts the background position for the relevant div...... Currently the hover for h2 span only works if you enter its are and i want it to change position if you enter the relevant li ...... any ideas ?

Cheers, Greg.

Answer 1

probably a bit confusing my side but in the end i needed to align the ref point of background position to nth child istead of the div currently used soooo...

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

that worked a treat ! fair play to me