hover - 悬停另一个 div 时更改 div css

Question

我的代码不起作用。我发现这是因为必须更改的 div 在另一个 div 中......如何绕过包含其他 div 的 div？在此示例中，我希望在悬停“partage”div 时更改“partagefb”div 的背景颜色

演示：http: //jsfiddle.net/u7tYE/1994/

谢谢

html:

<div class="partage" id="partage_70"><img src="/themes/glace_et_ombre/images/partage.png" border="0" width="22" height="21"></div>

    <div class="enveloppe_partage">
        <div class="partagefb"></div>
    </div>

CSS：

.partage{
    position:relative;
    float:left;
    margin: 2px;
    cursor:pointer;
    z-index: 100;
    width:20px;
    height:20px;
}
.partagefb{
    position:relative;
    width: 25px;
    height: 25px;
    margin:100px;
    background: #ccc;
}

.partage:hover ~ .partagefb{
    background-color:#000000;
}
.enveloppe_partage{
    position: absolute;
    margin: -28px 0 0 115px;
}

Answer 1

问题在于您的选择器使用

.partage:hover + .enveloppe_partage .partagefb{
background-color:#000000;
}

Answer 2

这是小提琴

将 ID 添加到 div

将HTML设为

  <div class="partage" id="partage_70">
     <img src="/themes/glace_et_ombre/images/partage.png" border="0" width="22" height="21">
  </div>
  <div class="enveloppe_partage" id="ank">
     <div class="partagefb"></div>
  </div>

而CSS可能是

 #partage_70:hover + .enveloppe_partage #ank {
    background-color:#000000;
 }