Стилизация нескольких элементов одного уровня при наведении - PullRequest
Новая
       20

Стилизация нескольких элементов одного уровня при наведении

2 голосов
/ 30 мая 2011

У меня есть HTML-разметка, подобная этой: 

<div id="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

Я бы хотел стилизовать все элементы .block, которые не отображаются при наведении курсора на .block.Есть ли способ, которым это может быть достигнуто только с помощью CSS?

Могу ли я сделать это с помощью правила CSS, похожего на .block:hover .block:not(:hover)?

Ответы [ 2 ]

4 голосов
/ 30 мая 2011 
#blocks:hover {
    background-color: blue;
}

.block:hover { 
    background-color: yellow;   
}

См. Fiddle .

Альтернативное решение 

.block:hover {
    background-color: blue;
}

#blocks:hover .block:not(:hover) { 
    background-color: yellow;   
}

См. Обновленный Fiddle .

2 голосов
/ 30 мая 2011

#blocks:hover .block {} для всех не накрываемых элементов, но парение над всем элементом #blocks и #blocks .block:hover {} для накрытого элемента должно работать.

...