css selector on hover ~

Question

<div class="a">
     <div class="b"></div>
     <div class="c"></div>
     <div class="d"></div>
</div>

I want to do some changes on class b when hover on class c. here is my code.

1)

.c:hover ~ .b {
  #style
}

2)

.a > .c:hover ~ .b {
  #style
}

both 1 & 2 not working for me. Did I miss out something?

Answer 1

I imagine, it is not possible to do something like this with just css. You might need a bit of Javascript.

Answer 2

use

    .c:hover + .b {
       #style
    }

instead.

Answer 3

The css ~ method only works for element just after the first selector div. You can use jquery hover function to achieve what you want. Here is a example fiddle.

Answer 4

you could try something like this, you change the order of the elements and use relative positioning to make it look like they come in the correct order, then use the next sibling selector.

<div class='a'>
    <div class='c'>
    </div>
    <div class='b'>
    </div>
    <div class='d'>
    </div>
</div>

.b, .c, .d {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
.b {
    background: yellow;
    position: relative;
    bottom: 102px;
}
.c {
    background: red;
    position: relative;
    top: 102px;
}
.d {
   background: blue;
}

.c:hover ~ .b {
    background: purple;
}