1

我一直在拖延尝试制作一个更漂亮的 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。）

4

3 回答 3

1

如果你有这样transtion的:hover

something:hover{
   transition: ...;
}

过渡只会在您悬停时应用，因此您需要将过渡设置为默认样式才能过渡所有状态

像这样

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

something:hover{
   color: blue;
}

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

#cb + label i {
  transition: color 1s;
}
于 2013-08-26T23:50:26.053 回答
1

你错过了一个> i

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

更新了 CodePen

于 2013-08-26T23:53:17.693 回答
1

解决方案 演示：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 */
}
于 2013-08-26T23:53:40.137 回答