Изменить фон метки, когда она действует как флажок
У меня есть ярлыки с изображениями, вложенными внутрь, которые действуют как флажок. Чего я не могу понять, так это того, как изменить фон за изображением, когда установлен этот конкретный флажок (нажата метка).
Похоже, что один из флажков показывает фон, но не оба, и элемент высоты не работает.
Кто-нибудь видит, что я делаю неправильно?
.notificationImgs {
width: 70px;
height: auto;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
.notifCheck:checked + label {
background: #CCC;
}
.notifCheck:checked .notificationImgs {
background-color: #CCC;
width: 100%;
height: 70px;
}<label for = "checkText">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Text Notifications" class = "notificationImgs">
</label>
<input type = "checkbox" name = "checkText" class = "notifCheck" id = "checkText" value = "text">
<label for = "checkEmail">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Email Notifications" class = "notificationImgs">
</label>
Ответы 4
Вот вам измененный HTML/код. У вас не было флажка, а ваш CSS — это селектор +, который ищет отмеченную + метку, поэтому для первого флажка он был нацелен на вторую метку.
.notificationImgs {
width: 70px;
height: 70px;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
.notifCheck:checked+label {
background: #CCC;
}
.notifCheck:checked .notificationImgs {
background-color: #CCC;
width: 100%;
height: 70px;
}
label{
display:inline-block;
}<input type = "checkbox" name = "checkText" class = "notifCheck" id = "checkText" value = "text">
<label for = "checkText">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Text Notifications" class = "notificationImgs"/>
</label>
<input type = "checkbox" name = "checkText" class = "notifCheck" id = "checkEmail" value = "text">
<label for = "checkEmail">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Email Notifications" class = "notificationImgs"/>
</label>Это отличается от вашего основного вопроса.
Фон не добавляется к правильной этикетке из-за порядка input и label. Поместите соответствующий input (скрытый флажок) перед соответствующим ярлыком. Так что .notifCheck:checked + label может найти правильный label. Также вы можете добавить display:inline-block ко всему стилю label. Так что проблема с высотой решит.
См. Фрагмент ниже:
.notificationImgs {
width: 70px;
height: auto;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
label{
display:inline-block;
padding:10px;
}
.notifCheck:checked + label {
background: #CCC;
}
.notifCheck:checked .notificationImgs {
background-color: #CCC;
width: 100%;
height: 70px;
}<input type = "checkbox" name = "checkText" class = "notifCheck" id = "checkText" value = "text">
<label for = "checkText">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Text Notifications" class = "notificationImgs">
</label>
<input type = "checkbox" name = "checkEmail" class = "notifCheck" id = "checkEmail" value = "text">
<label for = "checkEmail">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Email Notifications" class = "notificationImgs">
</label>Спасибо за помощь и объяснение.
Метка должна стоять после флажка в вашем случае.
label{
display:inline-block;
padding:10px;
background: #eee;
}
.notificationImgs {
width: 70px;
height: auto;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
.notifCheck:checked + label {
background: #aaa;
}
.notifCheck:checked .notificationImgs {
background-color: #aaa;
width: 100%;
height: 70px;
}<input type = "checkbox" name = "checkText" class = "notifCheck" id = "checkText" value = "text">
<label for = "checkText">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Text Notifications" class = "notificationImgs">
</label>
<input type = "checkbox" name = "checkEmail" class = "notifCheck" id = "checkEmail" value = "text">
<label for = "checkEmail">
<img src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "Email Notifications" class = "notificationImgs">
</label>В вашем примере кода у вас есть только один флажок. 2-я метка указывает, что вы, скорее всего, хотели включить 2-й флажок ввода с идентификатором #checkEmail.
Пробел (селектор потомков) выбирает только все элементы, которые являются потомками указанного элемента.
Итак, .notifCheck:checked .notificationImgs не вычисляется, потому что notificationImgs не является потомком notifCheck.
«+» (селектор соседнего элемента) выбирает только те элементы, которые являются соседними элементами.
Итак, notifCheck:checked + label выбирает только второй элемент метки, так как этот элемент следует сразу за элементом .notifCheck.
Спасибо, но как мне заставить новый фон покрывать всю высоту изображения?