悬停在SPAN上需要更改相同级别的DIV的背景 [英] Hovering over SPAN needs to change background of DIV on same level

问题描述

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

当悬停在SPAN（A，B，C，D等）上时，我需要将背景更改为与将鼠标悬停在栏的其余部分时相同。

我知道问题是因为SPAN在所有元素的END，但是我不能改变定位这个的。

我试过：

 
 code>＃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>< / li> 
< li class =85>< div style =width：85％;>< label> 85％< / label>< / div>< / 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>< / li> 
< li class =95>< div style =width：95％;>< label> 95％< / label>< / div>< span> / 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>< / li> 
< / ul> 
  
 CSS：
 code>＃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; 
} 
  
 
 
解决方案
你唯一应该改变的是：
处理：hover 上 li ，而不是 div   - 那么你没有问题：
 
 
 
更改
 ＃my-list li div：hover 
  
到
 ＃my-list li：hover div 
  
 
 b $ b 
和
 ＃my-list li div：hover>标签
  
到
 code>＃my-list li：hover div>标签
  
  span  code>到 li   - 然后将它的 div   
 
 
 
  http：// jsfiddle.net/taqveyjs/1/  
 
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;
}

解决方案
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/

                        
这篇关于悬停在SPAN上需要更改相同级别的DIV的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！