Как изменять цвет выбранного блока?
Как изменить цвет выбранного блока, чтобы после клика на блок менялся цвет всего блока?
Я пытался сделать через .option input:checked + span но это меняет только цвет текста, а не блока
Код
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Тестовая страница</title> <link rel="stylesheet" href="styles.css"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .quiz-container { background-color: #ffffff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 30px; width: 400px; text-align: center; } .question { font-size: 20px; margin-bottom: 20px; color: #333333; } .options { display: flex; flex-direction: column; align-items: center; } .option { margin: 10px 0; padding: 15px; border: 1px solid #007bff; border-radius: 5px; width: 100%; box-sizing: border-box; cursor: pointer; transition: background-color 0.3s; display: flex; align-items: center; } .option span { font-size: 16px; color: #555555; flex-grow: 1; padding-left: 10px; cursor: pointer; } .option:hover { background-color: #e6f7ff; } .option input { display: none; /* Скрыть стандартные радиокнопки */ } .option input:checked + span{ font-weight: bold; background-color: #33ff52; } .submit-btn { margin-top: 20px; padding: 10px 20px; font-size: 18px; background-color: #007bff; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; } .submit-btn:hover { background-color: #0056b3; } </style> </head> <body> <div class="quiz-container"> <div class="question" id="question">Какой язык программирования вы изучаете?</div> <div class="options"> <label class="option"> <input type="radio" name="answer" value="html"> <span>HTML</span> </label> <label class="option"> <input type="radio" name="answer" value="css"> <span>CSS</span> </label> <label class="option"> <input type="radio" name="answer" value="js"> <span>JavaScript</span> </label> </div> <button class="submit-btn" onclick="checkAnswer()">Проверить ответ</button> </div> <script> function checkAnswer() { const answerElements = document.getElementsByName('answer'); let selectedAnswer = null; for (const element of answerElements) { if (element.checked) { selectedAnswer = element.value; break; } } if (selectedAnswer === 'js') { alert('Правильный ответ! Вы изучаете JavaScript.' ); } else { alert(selectedAnswer); } } </script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Тестовая страница</title> <link rel="stylesheet" href="styles.css"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .quiz-container { background-color: #ffffff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 30px; width: 400px; text-align: center; } .question { font-size: 20px; margin-bottom: 20px; color: #333333; } .options { display: flex; flex-direction: column; align-items: center; } .option { margin: 10px 0; padding: 15px; border: 1px solid #007bff; border-radius: 5px; width: 100%; box-sizing: border-box; cursor: pointer; transition: background-color 0.3s; display: flex; align-items: center; } .option span { font-size: 16px; color: #555555; flex-grow: 1; padding-left: 10px; cursor: pointer; } .option:hover { background-color: #e6f7ff; } .option input { display: none; /* Скрыть стандартные радиокнопки */ } .option input:checked + span{ font-weight: bold; background-color: #33ff52; } .submit-btn { margin-top: 20px; padding: 10px 20px; font-size: 18px; background-color: #007bff; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; } .submit-btn:hover { background-color: #0056b3; } </style> </head> <body> <div class="quiz-container"> <div class="question" id="question">Какой язык программирования вы изучаете?</div> <div class="options"> <label class="option"> <input type="radio" name="answer" value="html"> <span>HTML</span> </label> <label class="option"> <input type="radio" name="answer" value="css"> <span>CSS</span> </label> <label class="option"> <input type="radio" name="answer" value="js"> <span>JavaScript</span> </label> </div> <button class="submit-btn" onclick="checkAnswer()">Проверить ответ</button> </div> <script> function checkAnswer() { const answerElements = document.getElementsByName('answer'); let selectedAnswer = null; for (const element of answerElements) { if (element.checked) { selectedAnswer = element.value; break; } } if (selectedAnswer === 'js') { alert('Правильный ответ! Вы изучаете JavaScript.' ); } else { alert(selectedAnswer); } } </script> </body> </html>
Дополнительно:
Вариант 1: при помощи :has.
.option:has(input:checked) { background-color: peachpuff; } |
.option:has(input:checked) { background-color: peachpuff; }
Вариант 2: при помощи JS и CSS:
.option.active { background-color: peachpuff; } |
.option.active { background-color: peachpuff; }
const optionsContainer = document.querySelector('.options'); const options = optionsContainer.querySelectorAll('.option'); optionsContainer.addEventListener('click', (event) => { const option = event.target.closest('.option'); if (option !== null) { options.forEach((entry) => entry.classList.remove('active')); option.classList.add('active'); } }); |
const optionsContainer = document.querySelector('.options'); const options = optionsContainer.querySelectorAll('.option'); optionsContainer.addEventListener('click', (event) => { const option = event.target.closest('.option'); if (option !== null) { options.forEach((entry) => entry.classList.remove('active')); option.classList.add('active'); } });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения цвета выбранного блока на веб-странице можно использовать различные методы, в зависимости от того, какой именно блок вы хотите стилизовать. Вот несколько способов, как можно это сделать:
1. Используя CSS:
Для изменения цвета фона выбранного блока можно использовать свойство background-color в CSS. Например, если у вас есть блок с классом "selected-block", вы можете применить следующий стиль:
.selected-block { background-color: #ff0000; /* красный цвет */ }.selected-block { background-color: #ff0000; /* красный цвет */ }
2. Используя JavaScript:
Если вы хотите изменить цвет блока динамически, то можно использовать JavaScript. Например, для изменения цвета фона выбранного блока по клику мыши можно использовать следующий код:
document.getElementById('selected-block').style.backgroundColor = '#ff0000'; // красный цвет
3. Используя jQuery:
Если вы работаете с jQuery, то можно использовать метод .css() для изменения стилей выбранного блока. Пример:
$('#selected-block').css('background-color', '#ff0000'); // красный цвет
4. Используя атрибут style в HTML:
Вы также можете задать стили непосредственно в HTML с помощью атрибута style. Например:
<div id="selected-block" style="background-color: #ff0000">Содержимое блока</div>
Надеюсь, эти примеры помогут вам изменить цвет выбранного блока на вашей веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!