Question

我有带有嵌套图像的标签，该标签充当复选框。我不知道的是，当选中特定复选框（单击标签）后，如何更改图像后面的背景。

似乎其中一个复选框正在显示背景，但不是两个都显示，并且height元素不起作用。

有人看到我在做什么错吗？

.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>

Answer 1

这是为您更改的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>

Answer 2

由于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>

Answer 3

在您的情况下，标签应位于复选框之后。

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>

Answer 4

在示例代码中，您仅存在一个复选框输入。第二个标签表示您最有可能打算包含一个ID为#checkEmail的第二个输入复选框。

空格（后代选择器）仅选择作为指定元素“后代”的所有元素。因此，.notifCheck:checked .notificationImgs不会计算，因为notificationImgs不是notifCheck的后代。

“ +”（相邻的同级选择器）仅选择与相邻同级相同的元素。因此，notifCheck:checked + label仅选择第二个标签元素，因为该元素紧随.notifCheck元素之后。

充当复选框时更改标签的背景

4 个答案: