1

アイコンに Font Awesome を使用して、より洗練された HTML チェックボックスを作成することを先延ばしにしてきました。私はこれにほとんど満足しています: (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>。)

(また、チェックされているアイコンとチェックされていないアイコンを交換すると、これはより使いやすくなると思いますが、それには異なる要素で 2 つのトランジションをチェーンする必要があるようで、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 に答える