CODEWITHSUNDEEP
hover
Recif
Recif

Reputation: 479

Make a div css change when hover an other div

My code is not working. I found this is because the divs whoch have to change are in an other div... How to bypass the div containing others? In this example I want the background color change of "partagefb" div when hovering "partage" div

demo: http://jsfiddle.net/u7tYE/1994/

Thanks

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

Upvotes: 0

Views: 390

Answers (2)

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

Here is the fiddle

Add Id to the div

Make HTML as

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

And CSS could be

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

Upvotes: 0

vipulsharma
vipulsharma

Reputation: 1252

The problem is with your selector use

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

Upvotes: 2

Related Questions