CSS 问题，input[id]+label，:hover, 和 :checked 问题

Question

所以我有点难以理解为什么这不起作用。我正在尝试替换我正在处理的示例站点上的类别复选框。我试图让它做以下事情:未选中时以一种方式出现，悬停时以另一种方式出现(选中或未选中)选中时以第三种方式出现(而不是悬停)。

这可能吗？这是我为受影响的部分截取的 html

                 <input type="checkbox" id="chkGeneral"><label for = "chkGeneral" title = "General"></label>

这是我正在尝试的 css

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

label {
      /* clickable area */
    height: 150px;
    width: 150px;
    margin: 0.75em;
    display: inline-block;
}
input[id=chkGeneral] + label{
    background: url('http://velvetcookierecords.com/wp-content/uploads/2014/10/fb-icon-150px-x-150px.png');
    background-size:100%;
    height:100px;
    width:100px;
}
input[id=chkGeneral]:hover + label{
    background: url('http://vignette1.wikia.nocookie.net/sonsofanarchy/images/d/d3/IOS_Icon_150px.png/revision/latest?cb=20130903223258');
    background-size:100%;
    height:100px;
    width:100px;
}
input[id=chkGeneral]:checked + label {
    background: url('http://re-vision.com/webwork/p09image-size-tags/ape-silverback.jpg');
    background-size:100%;
    height:100px;
    width:100px;
}

这是一个显示我的问题的 jsfiddle(我使用了三张来自谷歌的图片，因为我的文件存储在数据库中)。未选中时应为 facebook，悬停时应为 IOS 图标，选中时应为 gorilla 。

JSFiddle:https://jsfiddle.net/cdhvbg2t/#&togetherjs=JGlvDqekaw

谢谢你的帮助，我不知道哪里出了问题。

Answer 1

您的标签上需要有 :hover。

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

label {
  /* clickable area */
  height: 150px;
  width: 150px;
  margin: 0.75em;
  display: inline-block;
}

input[id=chkGeneral]+label {
  background: url('http://velvetcookierecords.com/wp-content/uploads/2014/10/fb-icon-150px-x-150px.png');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

input[id=chkGeneral]+label:hover {
  background: url('http://vignette1.wikia.nocookie.net/sonsofanarchy/images/d/d3/IOS_Icon_150px.png/revision/latest?cb=20130903223258');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

input[id=chkGeneral]:checked+label {
  background: url('http://re-vision.com/webwork/p09image-size-tags/ape-silverback.jpg');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

<input type="checkbox" id="chkGeneral">
<label for="chkGeneral" title="General"></label>

---

如果它应该在悬停时响应，选中与否，悬停规则需要放在最后

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

label {
  /* clickable area */
  height: 150px;
  width: 150px;
  margin: 0.75em;
  display: inline-block;
}

input[id=chkGeneral]+label {
  background: url('http://velvetcookierecords.com/wp-content/uploads/2014/10/fb-icon-150px-x-150px.png');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

input[id=chkGeneral]:checked+label {
  background: url('http://re-vision.com/webwork/p09image-size-tags/ape-silverback.jpg');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

input[id=chkGeneral]+label:hover {
  background: url('http://vignette1.wikia.nocookie.net/sonsofanarchy/images/d/d3/IOS_Icon_150px.png/revision/latest?cb=20130903223258');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

<input type="checkbox" id="chkGeneral">
<label for="chkGeneral" title="General"></label>