html - 将鼠标悬停在 SPAN 上需要更改同级 DIV 的背景

Question

我为此创建了一个 fiddle :http://jsfiddle.net/Lux0ztyt/

当鼠标悬停在 SPAN(A、B、C、D 等)上时，我需要将背景更改为与鼠标悬停在栏的其余部分时相同，但我不知道该怎么做.

我知道问题是因为 SPAN 位于所有元素的末尾，但我无法更改它的位置。它如何与保持原样的位置一起工作？

我试过:

#my-list li span:hover ~ div {
    /* background stuff */
}

还有:

#my-list li span:hover div {
    /* background stuff */
}

还有:

#my-list li span:hover + div {
    /* background stuff */
}

有什么建议吗？

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

您的代码几乎可以正常工作。你唯一应该改变的是:在 li 上处理 :hover 而不是 div - 那么你就没有问题了:

改变

#my-list li div:hover

到

#my-list li:hover div

和

#my-list li div:hover > label

到

#my-list li:hover div > label

span 元素会将它的 :hover 发送给 li - 然后它将为其 div 子元素着色如 css 中所定义。

http://jsfiddle.net/taqveyjs/1/