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

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

我的问题是当从默认状态到悬停状态（光标在图标上方移动）时，颜色从悬停时平滑变化 选中（点击图标），然后从悬停+选中到选中（光标移开）。然而，当从悬停返回默认（鼠标光标远离未经检查的图标）时，颜色不会转换但是立即改变。

为什么会发生这种情况？如何修复？奖金问题：这种效果可以在没有额外标记的情况下以某种方式完成吗？（<i>和<label>。）

（我还假设如果我在已检查和未经检查的图标之间进行交换，这将更有用，但这似乎需要在不同元素上链接两个转换，我不知道是否仅使用CSS即可。）

Answer 1

如果transtion中有:hover，就像这样

something:hover{
   transition: ...;
}

转换仅在您悬停时适用，因此您需要将转换设置为默认样式，以便转换所有状态

像这样

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

something:hover{
   color: blue;
}

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

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

Answer 2

您错过了> i

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

Updated CodePen

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 */
}

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

HTML

CSS

3 个答案: