Question

我需要悬停效果才能在CSS伪:checked类上工作，但不知何故。

有人可以帮助我伪类吗？

.llcategory-colorfilter {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}
.llcategory-colorfilter span {
  position: relative;
  transition: all 0.6s ease;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 1%;
}
.llcategory-colorfilter span input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.llcategory-colorfilter span + input[type="checkbox"]:checked + span {
  border: 2px solid rebeccapurple;
  transform: scale(1.2);
}
.llcategory-colorfilter span:hover {
  transform: scale(1.2);
}
.llcategory-colorfilter .cf1 {
  background: darkred;
}
.llcategory-colorfilter .cf2 {
  background: olivedrab;
}
.llcategory-colorfilter .cf3 {
  background: orangered;
}
.llcategory-colorfilter .cf4 {
  background: greenyellow;
}
.llcategory-colorfilter .cf5 {
  background: deepskyblue;
}
.llcategory-colorfilter .cf6 {
  background: #38c4bf;
}
.llcategory-colorfilter .cf7 {
  background: yellow;
}
.llcategory-colorfilter .cf8 {
  background: #d62e78;
}
.llcategory-colorfilter .cf9 {
  background: #ce2b2b;
}
.llcategory-colorfilter .cf10 {
  background: tomato;
}
.llcategory-colorfilter .cf11 {
  background: olivedrab;
}
.llcategory-colorfilter .cf12 {
  background: #239524;
}
.llcategory-colorfilter .cf13 {
  background: #564aba;
}
.llcategory-colorfilter .cf14 {
  background: #0b285a;
}
.llcategory-colorfilter .cf15 {
  background: #6f27b4;
}
.llcategory-colorfilter .cf16 {
  background: #38c4bf;
}
.llcategory-colorfilter .cf17 {
  background: antiquewhite;
}
.llcategory-colorfilter .cf18 {
  background: #d62e78;
}
.llcategory-colorfilter .cf19 {
  background: #ce2b2b;
}
.llcategory-colorfilter .cf20 {
  background: #3d6cbf;
}

<div class="llcategory-colorfilter">
  <span class="cf1">
                            <input type="checkbox" name="">
                        </span>
  <span class="cf2">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf3">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf4">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf5">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf6">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf7">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf8">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf9">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf10">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf12">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf13">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf14">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf15">
                             <input type="checkbox" name="">
                        </span>
</div>

Answer 1

在整个代码中，跨度旁边没有输入。 span + input这个选择器期望这样的东西

<span></span><input>

您的输入在范围内，因此您的选择器永远不会出现在页面上。重组HTML以匹配选择器，或者更改选择器以匹配HTML，如下所示：

span > input:checked

选择器的最后一部分在html中也不是正确的，输入字段旁边永远不会有跨度。为了使+ span工作，您需要这样的东西：

<input> <span></span>

为什么CSS伪类不起作用？

1 个答案: