Question

我为此创造了一个小提琴：http://jsfiddle.net/Lux0ztyt/

当鼠标悬停在SPAN（A，B，C，D等）上时，我需要它将背景改变为与悬停其余部分时相同的背景但是我无法解决如何做到这一点。

我知道问题是因为SPAN位于所有元素的END处，但我无法更改此位置。它如何与保持不变的职位一起工作？

我试过了：

#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

您的代码几乎正常运行。你唯一应该改变的是：处理:hover上的li而不是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 - 然后会按照CSS中的定义为其div子项着色。

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

Answer 2

TimeDead的答案是正确的，因为你无法在CSS中定位父级。我采取了不同的方法：

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

诀窍是对div进行z索引，使其落后于li，掩盖你的跨度。之后，您只需更新您的悬停类以定位li而不是div，一切正常。

Answer 3

可悲的是你要求做什么我不能确定可以在CSS中严格完成，因为在CSS中你无法选择和更改父项背景，在这种情况下，span是div的子项，因为它无法修改它的属性。

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

3 个答案: