为什么 CSS 过渡到默认样式不起作用？

Question

我一直在拖延，因为我试图制作一个更花哨的HTML复选框，使用Font Awesome作为图标。我几乎对此感到满意：（CodePen）

HTML

<input type="checkbox" id="cb"/>
<label for="cb">
  <i class='icon-check-sign'></i>
</label>

CSS

#cb {
  display: none;
}
#cb + label {
  font-size: 64px;
  color: #002b36; /* black */
  transition: color 1s;
}
/* hover */
#cb + label:hover > i {
  color: #268bd2; /* blue */
  transition: color 1s;
}
/* checked */
#cb:checked + label > i {
  color: #859900; /* green */
  transition: color 1s;
}
/* checked + hover */
#cb:checked + label:hover > i {
  color: #dc322f; /* red */
  transition: color 1s;
}

（颜色和过渡持续时间被夸大，以使问题更加明显。）

我的问题是，从默认状态到悬停（光标在图标上移动），从悬停到选中时（单击图标），以及从hover+checked到checked时（光标移开），颜色变化很平滑但是从悬停返回默认（鼠标光标从未选中的图标移开）时，颜色不会转换，而是会立即更改。

为什么会发生这种情况，如何解决？额外的问题是：在没有那么多额外标记的情况下，这种效果能以某种方式实现吗？（<i>和<label>。）

（我还认为，如果我在选中和未选中的图标之间切换，这会更有用，但这似乎需要在不同的元素上链接两个转换，我不知道这是否可以单独使用CSS。）

Answer 1

您缺少一个> i

#cb + label > i {
    font-size: 32px;
    color: #002b36; /* black */
    transition: color 1s;
}

更新的CodePen

Answer 2

如果:hover中有一个transtion，如

something:hover{
   transition: ...;
}

只有当你悬停时，转换才会应用，所以你需要将转换放在默认样式中，以便它转换所有状态

像这个

something{
   color: red;
   transition: all 200ms ease;
}
something:hover{
   color: blue;
}

因此，在您的情况下，您需要添加以下样式。

#cb + label i {
  transition: color 1s;
}

Answer 3

解决方案演示：http://jsfiddle.net/SuunK/2/标记：

<input type=checkbox id=cb hidden>
<label for=cb></label>

样式：

[for=cb] {
padding: 5px 16px;
position: relative;
border-radius: 4px;
background-color: black;
transition: background-color 1s;
}
[for=cb]:before,[for=cb]:after{
 content:'';
 position:absolute;
}
[for=cb]:before{
width: 6px;
height: 10px;
background: white;
-webkit-transform: rotateZ(-45deg);
left: 8px;
bottom: 6px;   
}
[for=cb]:after{
width: 5px;
height: 16px;
background: white;
-webkit-transform: rotateZ(45deg);
right: 13px;
bottom: 5px;  
}
[for=cb]:hover{
background-color: #268bd2; /* blue */    
}

/* checked */
#cb:checked + label{
background-color: #859900; /* green */
}
/* checked + hover */
#cb:checked + label:hover{
background-color: #dc322f; /* red */
}