Мобильная версияКак написать свойства псевдоклассов CSS с помощью JavaScript? ⇐ CSS
-
Гость
Как написать свойства псевдоклассов CSS с помощью JavaScript?
У меня есть несколько кнопок, и при нажатии на них с помощью мыши и клавиатуры они издают звуки. Я добавил свойство :active к своей кнопке, чтобы иметь некоторый эффект при нажатии мыши. Но я хочу сделать то же самое при нажатии кнопки клавиатуры. Как я могу сделать это в JavaScript?
HTML-код
w a s d Код Javascript
document.addEventListener("keypress", функция(событие){ makeound(event.key); Transformm(event.key); }); функция преобразованияm(val) { console.log(val); var sty = document.querySelector("."+val) sty.style.color = "бордовый"; sty.style.border = "10px сплошной #494d5c;"; sty.style.backgroundColor = "серый"; sty.style.boxShadow = "0 5px серый"; sty.style.transform = "translateY(2px)"; }
CSS-код
.барабан { контур: нет; граница: сплошная 10 пикселей #697087; размер шрифта: 5rem; семейство шрифтов: «Арво», курсив; высота строки: 2; вес шрифта: 900; цвет: #DA0463; текстовая тень: 3px 0 #DBEDF3; радиус границы: 15 пикселей; отображение: встроенный блок; ширина: 150 пикселей; высота: 150 пикселей; выравнивание текста: по центру; поле: 10 пикселей; цвет фона: белый; } .drum:активный { цвет: бордовый; граница: 10 пикселей, сплошная #494d5c; цвет фона: серый; box-shadow: 0 5px серый; преобразование: TranslateY (2px); }
Я попробовал описанный выше вариант, но когда я нажимаю клавишу на клавиатуре, кнопка меняется, но не возвращается обратно, как мы получаем с псевдоклассами CSS:active. Пожалуйста, помогите мне. Заранее спасибо.
У меня есть несколько кнопок, и при нажатии на них с помощью мыши и клавиатуры они издают звуки. Я добавил свойство :active к своей кнопке, чтобы иметь некоторый эффект при нажатии мыши. Но я хочу сделать то же самое при нажатии кнопки клавиатуры. Как я могу сделать это в JavaScript?
HTML-код
w a s d Код Javascript
document.addEventListener("keypress", функция(событие){ makeound(event.key); Transformm(event.key); }); функция преобразованияm(val) { console.log(val); var sty = document.querySelector("."+val) sty.style.color = "бордовый"; sty.style.border = "10px сплошной #494d5c;"; sty.style.backgroundColor = "серый"; sty.style.boxShadow = "0 5px серый"; sty.style.transform = "translateY(2px)"; }
CSS-код
.барабан { контур: нет; граница: сплошная 10 пикселей #697087; размер шрифта: 5rem; семейство шрифтов: «Арво», курсив; высота строки: 2; вес шрифта: 900; цвет: #DA0463; текстовая тень: 3px 0 #DBEDF3; радиус границы: 15 пикселей; отображение: встроенный блок; ширина: 150 пикселей; высота: 150 пикселей; выравнивание текста: по центру; поле: 10 пикселей; цвет фона: белый; } .drum:активный { цвет: бордовый; граница: 10 пикселей, сплошная #494d5c; цвет фона: серый; box-shadow: 0 5px серый; преобразование: TranslateY (2px); }
Я попробовал описанный выше вариант, но когда я нажимаю клавишу на клавиатуре, кнопка меняется, но не возвращается обратно, как мы получаем с псевдоклассами CSS:active. Пожалуйста, помогите мне. Заранее спасибо.
