复选框：悬停 + 标签在 Chrome 49,50 中不起作用

Question

我必须遵循HTML：

<div>
  <input id="check" type="checkbox" />
  <label for="check"><span>Test label</span></label>
</div>

我想以某种方式设置复选框 + 标签的样式。为此，我使用

input[type=checkbox] {
  display: none;
}

以删除该复选框，然后添加自己的自定义框，其中包含：

input[type=checkbox] + label {
  position: absolute;
  border-radius: 2px;
  background-color: #baccdc;
  width: 21px;
  height: 21px;
  white-space: nowrap;
  padding-left: 21px;
  cursor: pointer;
}

因此，这在每个浏览器中都可以正常工作。但是，现在我想像这样更改:hover样式：

input[type=checkbox]:hover + label {
  background-color: green;
  display: block;
}

在

我单击复选框后，这在Chrome中起作用，然后在短时间内出现:hover样式。

在 Firefox 中，这种样式总是出现在 :hover 上。

这是一个JSFiddle。

这是常见的Chrome问题还是我的CSS中的错误？

Answer 1

input[type=checkbox] {
  display: none;
}
label span {
  display: block;
  margin-left: 5px;
}
input[type=checkbox] + label {
  position: absolute;
  border-radius: 2px;
  background-color: #baccdc;
  width: 21px;
  height: 21px;
  white-space: nowrap;
  padding-left: 21px;
  cursor: pointer;
}
input[type=checkbox] + label:hover {
  background-color: green;
  display: block;
}
input[type=checkbox]:checked + label {
  background-color: yellow;
  display: block;
}

<div>
  <input id="check" type="checkbox" />
  <label for="check"><span>Test label</span></label>
</div>

尝试将:hover效果放在label上：

<div>
  <input id="check" type="checkbox"/>
  <label for="check"><span>Test label</span></label>
</div>

.CSS：

input[type=checkbox] + label:hover
{
  background-color: green;
  display: block;
}

这是相同的演示

Answer 2

input的display: none;状态似乎有问题。

这是一个在Chrome中也能正常工作的解决方法：

#groupInput label:hover  {
  background-color: green;
  display: block;
}

小提琴