Как изменить цвет элемента по клику в другом компоненте?
Есть блок «place_1», по умолчанию зеленого цвета. При клике на этот элемент появляется модальное окно, где есть кнопка «Бронь». По клику «Бронь» блок «place_1» должен из зеленого окрашиваться в красный. Поменять цвет не получается так как блок в другом компоненте.
import Modal from "../modal/modal"; import < useState >from "react"; function Freelance () < const [modalActive, setModalActive ] = useState(false) return( setModalActive(true)>>1 setActive=/> ) > export default Freelance; Модальное окно
import React from "react" import "./modal.css" const Modal = () => < return( onClick=setActive(false)>> onClick= e.stopPropagation()>> ) > export default Modal; Отслеживать
9,149 6 6 золотых знаков 15 15 серебряных знаков 30 30 бронзовых знаков
задан 28 янв в 18:47
Nero Fighter Nero Fighter
3 3 3 бронзовых знака
А что именно не получается?
28 янв в 18:50
Это проект по брони мест. При бронировании должно перекрашиваться в другой цвет. Сложности в том что это два разных компонента.
28 янв в 19:02
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Создайте состояние в компоненте Freelance, которое будет отвечать за цвет и передайте функцию изменения цвета в компонент Modal в виде пропсов, как вы это делаете с setModalActive:
function Freelance () < const [modalActive, setModalActive] = useState(false); const [colorPlace, setColorPlace] = useState(false); return( setModalActive(true)> style=> >1 setActive= changeColor= /> ) > Добавьте стиль цвета в зависимости от состояния переменной style=> В компоненте Modal при нажатии кнопки, вызывайте функцию и передавайте нужное значение:
const Modal = () => < return( onClick=setActive(false)>> onClick= e.stopPropagation()> > ) > Для примера используется значение состояния как true/false
Так же можно не добавлять style а добавлять например новый класс, тогда строку
className="place_1" Смена цвета кнопок при нажатии
Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку менялся задний фон но при нажатии на другую на ней также менялся задний фон а на старой о становился прежним. Жду помощи товарище
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Смена цвета при наведении
Перепробовал несколько способов, но при наведении цвет не меняется на более светлый. Помогите.
Смена цвета при выборе меню
Подскажите как сделать так, есть меню музыка, видео, фото, и когда пользователь заходит в один из.
Смена цвета ссылки при навелении курсора
Подскажите как сделать плавное наполнение ссылки цветом при наведении как на этом сайте.
Смена цвета CSS при клике по элементу
как можно сменить свойство, например цвет фона div, при клике на другой div?
Регистрация: 10.11.2017
Сообщений: 283
1 2 3
класс/id кнопки :active { background-color: #цвет; }
2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
Сообщение было отмечено Maroon_5 как решение
Решение
Богдан Хакер, а Вы пробовали свой код?
Maroon_5, Вас какая реализация интересует на CSS или JS?
Вот реализация на CSS, немного топорно, но эффективно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
html lang="en"> head> meta charset="UTF-8"> title>Document/title> style> ul label input:checked~label input[type="radio"] < display:none >/style> /head> body> ul> li> a href=""> input type="radio" name="radio" id="radio1" checked> label for="radio1">Item1/label> /a> /li> li> a href=""> input type="radio" name="radio" id="radio2"> label for="radio2">Item2/label> /a> /li> li> a href=""> input type="radio" name="radio" id="radio3"> label for="radio3">Item3/label> /a> /li> /ul> /body> /html>
За код не бить писал на коленке. Для таких целей конечно лучше юзать js при условии, если переходы из меню будут на внутренние страницы сайта.
Как изменить цвет кнопки при нажатии в CSS
Кнопка — это кликабельный элемент, используемый для выполнения определенного действия. Используя CSS, вы можете установить различные стили кнопок, один из которых — изменить цвет кнопки при нажатии. Цвет кнопки можно задать с помощью CSS. : активный псевдокласс.
Этот блог научит вас процедуре, связанной с изменением цвета кнопки при нажатии. Для этого, во-первых, узнайте о псевдоклассе :active.
Что такое «:active» в CSS?
Изменение цвета кнопки при клике в CSS возможно с помощью « : активный псевдокласс. В HTML он указывает на элемент, который активируется, когда пользователь нажимает на него. Более того, при использовании мыши активация начинается при нажатии клавиши мыши.
Синтаксис
“ а ” относится к элементу HTML, к которому будет применен класс :active.
Давайте обратимся к примеру, чтобы понять изложенную концепцию.
Как изменить цвет кнопки при нажатии в CSS?
Чтобы изменить цвет кнопки при нажатии, сначала создайте кнопку в файле HTML и назначьте имя класса « бтн ».
HTML
кнопка учебный класс знак равно ‘кнопка’ > Кнопка / кнопка >
Далее в CSS задаем цвет кнопки. Для этого мы будем использовать « .btn », чтобы получить доступ к кнопке, и установите цвет кнопки как « RGB(0, 255, 213) ».
CSS
фоновый цвет : RGB ( 0 , 255 , 213 ) ;
После этого примените псевдокласс :active к кнопке как « .btn: активный ” и установите цвет кнопки, которая будет отображаться в активном состоянии, как “ RGB(123, 180, 17) ”:
фоновый цвет : RGB ( 123 , 180 , 17 ) ;
Это покажет следующий результат:
Теперь давайте добавим заголовок с тегом
и именем класса кнопки « кнопка ‘, внутри тега .
HTML
h1 > Изменить цвет кнопки / h1 >
кнопка учебный класс знак равно ‘кнопка’ > Нажми на меня / кнопка >
Далее мы перейдем к CSS, стилизуем кнопку и применим к ней :active. Для этого мы установим стиль границы как « никто » и укажите отступы как « 15 пикселей ». После этого установите цвет текста кнопки как « RGB(50, 0, 54) ” и его фон как “ RGB(177, 110, 149) », а его радиус как « 15 пикселей ”:
набивка : 15 пикселей ;
цвет : RGB ( 50 , 0 , 54 ) ;
фоновый цвет : RGB ( 177 , 110 , 149 ) ;
радиус границы : 15 пикселей ;
Это покажет следующий результат:
После этого мы применим псевдокласс :active к кнопке как « .кнопка: активная ” и установите цвет кнопки как “ RGB(200, 255, 0) ”:
фоновый цвет : RGB ( 200 , 255 , 0 ) ;
После того, как вы реализуете весь приведенный выше код, перейдите к файлу HTML и выполните его, чтобы проверить результат:
Из вывода видно, что при нажатии кнопки ее цвет изменяется в соответствии с указанным цветовым кодом RGB.
Вывод
Чтобы изменить цвет кнопки при нажатии в CSS, « : активный можно использовать псевдокласс. Более конкретно, он может представлять элемент кнопки, когда он активируется. Используя этот класс, вы можете установить разные цвета кнопок, когда на них щелкает мышь. В этой статье объясняется процедура изменения цвета кнопки при нажатии в CSS.
Как изменить цвет кнопки при нажатии css
Смена цвета при наведении
Перепробовал несколько способов, но при наведении цвет не меняется на более светлый. Помогите.
Смена цвета при выборе меню
Подскажите как сделать так, есть меню музыка, видео, фото, и когда пользователь заходит в один из.
Смена цвета ссылки при навелении курсора
Подскажите как сделать плавное наполнение ссылки цветом при наведении как на этом сайте.
Смена цвета CSS при клике по элементу
как можно сменить свойство, например цвет фона div, при клике на другой div?
Как изменить вид нажатой кнопки?
Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :active, который добавляется к селектору button . Стилевые правила для этого селектора определяют вид нажатой кнопки (пример 1).
Пример 1. Использование :active
Результат данного примера показан на рис. 1. Для селектора button:active используется свойство box-shadow со значением inset , оно создаёт внутреннюю полупрозрачную тень, за счёт чего кнопка кажется вдавленной.
CSS. Измененить цвет при нажатии и сохранить изменённое значение
Как сделать так, чтобы при клике изменялся цвет элемента и не изменялся на дефолт при клике на другое место.
Попробовала добавить код от Vadizar.
Получается вот так:
Но когда я добавляю нижнее, так как мне не нужно изменение фона. Я с фоном не работаю :
у меня «палец вверх» не становится зелёным. Почему ?
Почему подсветка кода от Vadizar такая:
слово background выделяется зелёным
А при моём (скорей всего неправильном) варианте такая:
слово color не выделяется зелёным
И почему в конец после transition не добавляется ; ?
Вариант на `JavaScript`
Добавлять класс со стилем при клике на кнопку:
Вариант на чистом `HTML/CSS`
Завязаться на значение :checked у :
Решение на чистом CSS без хаков с input :
Вся загадка кроется в значении transition: 9999999s . Цвет постепенно будет возвращаться к исходному значению в течении 2777 часов. При повторном клике на кнопку счётчик перезапустится.
Я не настаиваю на том, что это верный подход, и полностью согласен с решением St1myL. Тем не менее, данный пример показывает, на что способен CSS при извращенном воображении и может быть полезен в некоторых случаях, когда невозможно использовать JS и не подходит метод с input .
Как сделать кнопку с эффектом нажатия с помощью CSS
CSS3 многократно расширил возможности оформления сайта. Теперь возможны самые разнообразные эффекты без применения сторонних скриптов: передвижение, вращение, цветовое разнообразия.
Именно благодаря CSS3 стало возможным сделать невероятно красивые кнопки только с помощью стилей. Теперь, чтобы из ссылки сделать полноценную анимационную кнопку достаточно будет просто указать нужный класс стиля.
Предлагаю Вашему внимание одно из простейших исполнений кнопки с эффектом нажатия.
Button 1Button 2
Для начала рассмотрим HTML и CSS этих кнопок
Кнопка создается из ссылки путем добаления классов.
push_but это класс отвечающий за стили и анимацию кнопки;
red – стили красной кнопки;
yellow – стили желтой кнопки;
А вот и CSS стили кнопок. Их Вам нужно скопировать в css файл Вашего сайта.
Изменения цвета кнопки с эффектом нажатия
Хочу Вам рассказать как добавить свои цвета для этой кнокпи. Для этого в качестве примера будем создавать зеленый цвет кнопки. Итак вот шаги, которые вам нужно будет предпринять для того,чтобы создать свой цвет кнопки:
- Скопировать полностью все классы отвечающие за цвет, например класс red. Для этого копируем .red и все его содержимое, которое в фигурных скобках и .red:hover со всем его содержимым фигурных скобках . Помещаем скопированое содержимое в блокнот в текстовый файл.
- Первым делом нужно изменить названия классов CSS. Например, для нашего примера назовем новый класс green.
В блокноте нажимаете Правка – Заменить (CTRL+H).
Похожие публикации:
- Как сделать картинку белой css
- Как сделать карусель в css
- Как сделать кнопку подробнее в html css v34
- Как сделать круглую картинку css