Есть ли способ применить фильтр оттенков серого к остальной части страницы при наведении курсора на элемент?
Я новичок в этом и пытаюсь настроить свой профиль на веб-сайте, поддерживающем кодирование html/css. Я понял, как перевести мои изображения в оттенки серого до наведения, но мне интересно, есть ли способ перевести остальную часть страницы в оттенки серого при наведении, чтобы изображение было единственным цветным элементом.
Все, что я пробовал, в буквальном смысле просто бросало что-то в стену и смотрело, прилипнет ли оно, поскольку я даже не знаю, с чего начать с чего-то подобного, поэтому я не верю, что добавление моих неудачных попыток окажет какую-либо помощь. Ниже приведен мой текущий код изображений, все они имеют один и тот же идентификатор CSS.
.img{
filter: Grayscale(100%);
}
.img:hover {
transform: scale(X);
filter: drop-shadow(Xpx Xpx #xxx) !important;
filter: Grayscale(0%);
}
Приношу извинения, если этот пост не содержит достаточно информации, английский не мой родной язык, и я, признаться, понятия не имею, что делаю.
Ответы 1
Вы можете добиться чего-то подобного, используя CSS-селектор :has(). Проверяем body, есть ли в данный момент img, на который наведен курсор. Если да, примените следующий CSS ко всем (*) элементам, которые не являются img, на которые в данный момент наведен курсор.
изменить: вы можете обменять img в этом селекторе на любой другой селектор/класс, просто обязательно замените оба.
edit2: как упоминалось в комментариях @CBroe, вы можете изменить селектор на body:has(img:hover) *:not(:hover) (удалив второй селектор img, чтобы он работал, когда нужные элементы вложены.
body:has(img:hover) *:not(:hover) {
filter: grayscale(1);
}<img src = "https://picsum.photos/id/1/300"/><img src = "https://picsum.photos/id/11/300"/><img src = "https://picsum.photos/id/21/300"/><img src = "https://picsum.photos/id/31/300"/><img src = "https://picsum.photos/id/41/300"/><img src = "https://picsum.photos/id/51/300"/><img src = "https://picsum.photos/id/61/300"/><img src = "https://picsum.photos/id/71/300"/><img src = "https://picsum.photos/id/81/300"/><img src = "https://picsum.photos/id/91/300"/><img src = "https://picsum.photos/id/101/300"/>Это больше не будет работать, как только изображение будет вложено в любой другой элемент.
@CBroe, ты прав. Однако изменение селектора может заставить его снова работать. Поскольку наведен только один элемент, селектор также может выглядеть следующим образом. Работает вложенно. body:has(img:hover) *:not(:hover)
Удаление второго селектора img помогло! Спасибо большое ♡
Следует отметить, что сами родительские элементы также не будут фильтроваться. Поэтому, если у них есть фоновый цвет/изображение, оно не будет фильтроваться, а если у них несерый цвет, их текстовые узлы также не будут фильтроваться. (и вам, вероятно, следует удалить второй img из последнего селектора даже во фрагменте).
@Kaiido Я понял это после применения кода, но на самом деле мне очень нравится эффект, который он дает. Спасибо за подробное объяснение, я запишу это для будущих начинаний!
Можете ли вы предоставить минимально воспроизводимый пример , чтобы участники могли помочь вам с вашей проблемой? Также прочтите как задать хороший вопрос. Вы получите лучшие ответы, если будете следовать этому руководству.