Применение фильтра ко всем последующим и предыдущим одноуровневым элементам в CSS при наведении курсора мыши ⇐ Html

[Anonymous]

У меня есть сетка элементов, которые я хочу отображать в нефильтрованном виде при загрузке страницы. Когда пользователь наводит указатель мыши на один из них, он должен оставаться выделенным, в то время как другие элементы становятся серыми. Мне удалось заставить это работать нормально для последующих элементов, но не для предыдущих. Затем я придумал следующее решение:

Код: Выделить всё

.child:hover {
filter: grayscale(0);
/*forces the 'active' element to stay unfiltered. */
}

.parent:hover>div {
filter: grayscale(1);
transition: filter 0.5s;
}

.parent>div {
filter: grayscale(0);
transition: filter 0.5s;
/* so the transition back out is smooth */
}

Код: Выделить всё

One
of
any
number
of
children

Проблема в том, что затухание происходит, когда пользователь также помещает курсоры в промежутки между элементами - поэтому, если их размещение неудачное, все будет отображаться в оттенках серого и выглядеть неактивным.
Я бы хотел добиться этого без использования JavaScript, если это возможно. Я знаю, что в CSS нет встроенного селектора «предыдущие братья и сестры», и я пробовал различные комбинации «имеет», но ничего не добился. Возможно ли это?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ss-on-mous