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图标以及检查时的大猩猩。

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

感谢您的帮助，我很遗憾错误的地方。

Answer 1

您需要在标签上加:hover。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果它应该悬停，检查与否，则悬停规则必须是最后一次

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

只需在所有这些选项卡上使用#选择器即可。您的悬停需要在label上触发。然后，如果您总是希望触发:hover，无论是否进行了检查，请将:hover选择器设为最后一个。

＆＃13;

input[type=checkbox] {
  display: none;
}

label {
  /* clickable area */
  height: 150px;
  width: 150px;
  margin: 0.75em;
  display: inline-block;
}

input#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#chkGeneral:checked + label {
  background: url('http://re-vision.com/webwork/p09image-size-tags/ape-silverback.jpg');
  background-size: 100%;
  height: 100px;
  width: 100px;
}

input#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;
}

＆＃13;

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

＆＃13;

CSS问题，输入[id] +标签，：悬停和：已检查问题

2 个答案: