Изменить свойство CSS, когда выбран другой элемент

У меня есть своего рода интернет-магазин, и на мобильном устройстве, когда пользователь выбирает фильтры, я хочу, чтобы кнопка фильтра имела границы - таким образом пользователь узнает, что к нему применены некоторые фильтры. Соответственно, когда ни один из фильтров не применяется, я хочу, чтобы кнопка вернулась в нормальное состояние без границ.

Я могу сделать это:

@include mobile {
    border: solid;
} 

Но таким образом граница будет появляться всегда, а это не то, чего я хочу. Фильтры, которые можно выбрать, находятся в другом файле и папке .scss, поэтому я не могу (?) связать их с этим файлом, над которым я работаю. Итак, могу ли я каким-либо образом добиться этого с помощью CSS/SASS, или мне придется применить здесь JS?

«Фильтры, которые можно выбрать, находятся в другом файле .scss» - собственно фильтрующие элементы не являются, только их форматирование. Чтобы на этот вопрос можно было ответить, вы должны прежде всего показать нам пример своей HTML-структуры. (Но, скорее всего, это нет будет возможно с использованием только CSS и потребует некоторой логики сценариев.)
CBroe 10.05.2022 13:17

Отвечает ли это на ваш вопрос? Могу ли я иметь эффект onclick в CSS?

Sigurd Mazanti 10.05.2022 13:17

@SigurdMazanti не совсем: моя проблема в том, что элемент, стиль которого я хочу изменить, отличается от элемента, который будет нажат

Danylo Herasymov 10.05.2022 14:08
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
3
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, вам нужно определить, применили ли вы хотя бы фильтр или нет. Для этого требуется некоторый javascript.

Если условие возвращает true (в вашем случае это означает, что выбраны некоторые фильтры), вам нужно будет добавить класс CSS к кнопке фильтра, который сделает ее с границами. Изначально у кнопки фильтра не должно быть никаких фильтров, так как мы предполагаем, что фильтров нет, когда пользователь начинает навигацию.

так, например, вот некоторые scss:

    .filter-button{
         border:1px solid transparent; /* has a transparent border*/
         transition: border 0.3s ease-in-out; /*adds a cool transition when you 
         add the has-filters class*/
         &.has-filters{
         /*when the condition if (filters_exist) returns true, you add this class to 
          the HTML filter button which has the class .filter-button*/
          border:1px solid blue;
         }
     }

Это на самом деле звучит очень разумно! Спасибо, попробую реализовать :)

Danylo Herasymov 11.05.2022 14:34

Другие вопросы по теме