Для того чтобы при наведении на одну кнопку, менялся цвет другой кнопки, можно использовать язык разметки HTML в сочетании с языком стилей CSS и языком программирования JavaScript.
1) HTML:
Создайте кнопки, которые будут менять цвет:
<button id="button1">Кнопка 1</button> <button id="button2">Кнопка 2</button>
2) CSS:
Определите стили кнопок и особые стили для изменения цвета при наведении:
button { /* общие стили кнопок */ } button:hover { /* стили для наведения */ }
3) JavaScript:
Напишите код, который будет изменять цвет второй кнопки при наведении на первую:
document.getElementById("button1").addEventListener("mouseover", function() { document.getElementById("button2").style.backgroundColor = "red"; }); document.getElementById("button1").addEventListener("mouseout", function() { document.getElementById("button2").style.backgroundColor = ""; // сброс цвета при отводе курсора });
Теперь, когда вы наводите курсор на первую кнопку, цвет второй кнопки будет меняться на красный. При отводе курсора, цвет второй кнопки сбрасывается.
Обратите внимание, что в данном ответе использован вариант с помощью JavaScript. Однако, можно также использовать только HTML и CSS, используя, например, псевдоэлементы ::after
или ::before
.