У меня есть своего рода интернет-магазин, и на мобильном устройстве, когда пользователь выбирает фильтры, я хочу, чтобы кнопка фильтра имела границы - таким образом пользователь узнает, что к нему применены некоторые фильтры. Соответственно, когда ни один из фильтров не применяется, я хочу, чтобы кнопка вернулась в нормальное состояние без границ.
Я могу сделать это:
@include mobile {
border: solid;
}
Но таким образом граница будет появляться всегда, а это не то, чего я хочу. Фильтры, которые можно выбрать, находятся в другом файле и папке .scss, поэтому я не могу (?) связать их с этим файлом, над которым я работаю. Итак, могу ли я каким-либо образом добиться этого с помощью CSS/SASS, или мне придется применить здесь JS?
Отвечает ли это на ваш вопрос? Могу ли я иметь эффект onclick в CSS?
@SigurdMazanti не совсем: моя проблема в том, что элемент, стиль которого я хочу изменить, отличается от элемента, который будет нажат
Итак, вам нужно определить, применили ли вы хотя бы фильтр или нет. Для этого требуется некоторый 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;
}
}
Это на самом деле звучит очень разумно! Спасибо, попробую реализовать :)