css selector on hover ~

Question

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

Я хочу сделать некоторые изменения в классе b при наведении на класс c. вот мой код.

1)

.c:hover ~ .b { 
    #style 
} 

2)

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

как 1 & 2 не работает для меня. Я что-то пропустил?

Answer 1

Полагаю, невозможно сделать что-то подобное с помощью только css. Возможно, вам потребуется немного Javascript.

Answer 2

использование

.c:hover + .b { 
     #style 
    } 

вместо этого.

Answer 3

Метод css ~ работает только для элемента сразу после первого селектора div. Вы можете использовать функцию jquery hover для достижения желаемого. Вот пример fiddle.

Answer 4

вы можете попробовать что-то вроде этого, вы меняете порядок элементов и используете относительное позиционирование, чтобы они выглядели так, как будто они поступают в правильном порядке, а затем используют следующий селектор.

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