Hovering over SPAN needs to change background of DIV on same level - html

Question

I have created a fiddle for this: http://jsfiddle.net/Lux0ztyt/
When hovering over the SPAN (A,B,C,D, etc.), I need it to change the background to the same as when hovering the rest of the bar however I can't work out how to do it.
I know the problem is because the SPAN is at the END of all the elements but I am not able to change the positioning of this. How can it work with the positions staying as they are?
I have tried:
#my-list li span:hover ~ div {
/* background stuff */
}
And also:
#my-list li span:hover div {
/* background stuff */
}
And also:
#my-list li span:hover + div {
/* background stuff */
}
Any suggestions?
HTML:
<ul id="my-list">
<li class="100"><div style="width: 100%;"><label>100%</label></div><span>A</span></li>
<li class="85"><div style="width: 85%;"><label>85%</label></div><span>B</span></li>
<li class="95"><div style="width: 95%;"><label>95%</label></div><span>C</span></li>
<li class="85"><div style="width: 85%;"><label>85%</label></div><span>D</span></li>
<li class="95"><div style="width: 95%;"><label>95%</label></div><span>E</span></li>
<li class="80"><div style="width: 80%;"><label>80%</label></div><span>F</span></li>
<li class="90"><div style="width: 90%;"><label>90%</label></div><span>G</span></li>
<li class="95"><div style="width: 95%;"><label>95%</label></div><span>H</span></li>
</ul>
CSS:
#my-list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#my-list li {
display: block;
width: auto;
text-align: left;
position: relative;
margin: 2px 0px;
}
#my-list li span {
position: absolute;
left: 5px;
top: 0px;
color: #fff;
text-shadow: 1px 1px 1px #555;
font-size: 0.85em;
}
#my-list li div, #my-list li label, #my-list li span, #my-list li {
height: 30px;
line-height: 30px;
}
#my-list li div {
position: absolute;
background: #b02976;
left: 0px;
top: 0px;
width: 0px;
border-radius: 7px;
transition: width 1s, background-color 0.4s ease;
}
#my-list li div:hover {
background: #009e77;
transition: all 0.4s ease;
}
#my-list li div:hover > label {
display: block;
opacity: 1.0;
transition: all 0.4s ease;
}
#my-list li div label {
position: absolute;
right: 5px;
color: #fff;
font-weight: bold;
font-size: 0.7em;
opacity: 0;
transition: all 0.4s ease;
text-shadow: 1px 1px 1px #555;
}

Answer 1

Your code is almost working. The only thing you should change:
Handle the :hover on li rather than the div - then you have no problem:
change
#my-list li div:hover
to
#my-list li:hover div
and
#my-list li div:hover > label
to
#my-list li:hover div > label
The span element will send its :hover to the li - which then will colorize its div child as defined in the css.
http://jsfiddle.net/taqveyjs/1/

Answer 2

TimeDead's answer is correct in that you can't target a parent in CSS. I took a different approach though:
http://jsfiddle.net/austinthedeveloper/Lux0ztyt/2/
#my-list li div {
position: absolute;
background: #b02976;
left: 0px;
top: 0px;
width: 0px;
border-radius: 7px;
transition: width 1s, background-color 0.4s ease;
z-index:-1;
}
#my-list li:hover div {
background: #009e77;
transition: all 0.4s ease;
}
#my-list li:hover div > label {
display: block;
opacity: 1.0;
transition: all 0.4s ease;
}
The trick is to z-index the div so it is behind the li, masking your span. After that, you just update your hover classes to target the li instead of the div and everything works.

Answer 3

Sadly what your asking to do I'm not sure can be done strictly in CSS since in CSS you cannot select and change the parents background in this case the span is the child of the div there for cannot modify it's attributes.