jQueryでチェックボックスのホバー効果をシミュレートする

Question

jQueryを使用してチェックボックスにカーソルを合わせると、その効果がどのようにシミュレートされますか？ ChromeとFirefoxでこれを行うと、チェックボックスの入力が青色で強調表示されます。もう少し文脈を与えることを

が、私はそうのようなグリッドを持っています。

<table> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>this is a checkbox</td> 
     </tr> 
    </tbody> 
</table 

私は、ユーザーが<tr>

の上に置いたときにチェックボックスがデフォルト青色を強調表示されていること、それを作りたいですthis is a checkboxのラベルを貼り、forという属性のチェックボックスを参照することができますが、<tr>の上にカーソルを置くと、この効果が発生します。

CSSを使用してチェックボックス入力のスタイルを変更するのはちょっと怪しいですが、ちょっと疑わしいです。

Answer 1

/編集後の編集：一部のブラウザ（Operaなど）では、padding-right:100pxのような操作ができるようになっているので、チェックボックスの近くにマウスを置くとチェックボックスも強調表示されます。あなたはそれでしばらく時間を無駄にすることができますが、私はあなたがライブラリでそれを行うことを強く勧めます。

このような青いホバーは、オペレーティングシステムからのものです。想像できる方法だけが焦点を当てていただろうが、明らかにそれは動作しません。

過去10年間私たちがやってきたことは、チェックボックスを隠した入力に変えてイメージを使うことができます。そこにはたくさんの図書館があります。

​​。

Answer 2

私は一見の一貫性のためにあなた自身の細工されたチェックボックスでチェックボックスを置き換えることです。私はしばらく前に作ったプラグインからこれを抜き出して編集しました。

デモ：http://jsfiddle.net/elclanrs/jTteE/

HTML：

<label><input type="checkbox">Hey</label> 

CSS：

input[type="checkbox"] { 
    position: absolute; 
    margin-left: -9999px; 
} 
.check { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    margin-right: .5em; 
    width: 1.1em; 
    height: 1.1em; 
    background: #ddd; 
} 
.check:hover { 
    background: pink; 
} 
.check.checked { 
    background: red; 
} 
.check.checked:after { 
    content: "\2713"; 
    position: absolute; 
    font-size: 22px; 
    font-weight: bold; 
    line-height: 16px; 
    top: 0; 
    z-index: 999; 
    color: white; 
} 

JS：

Answer 3

Mr. ajbeaven、<label>タグを満たしてください！ ;-)

ANSWER：http://jsfiddle.net/wh5N9/76/
ませんジャバスクリプト、ラベルに行わだけHTML ...

任意のマウス操作は、そのチェックボックスに反映されます（これは含まれてマウスを動かす、クリックする）。

<label>タグは、要素のラベルを定義します。

<label>要素は、 ユーザーにとって特別なものとしてレンダリングされません。 しかし、ユーザが<label>要素内のテキストをクリックすると、コントロールがトグルするので、マウスユーザのユーザビリティの改善は, です。

<label>タグのfor属性は、それらを結合する関連要素のid 属性と等しくなければなりません。

あなただけの下に見られるように、ラベルの属性「の」内チェックボックスIDと一致する必要があります：あなたは、チェックボックスのためにできるだけ多くのラベルを持つことができます

<input type="checkbox" id="YAHOO"><label for="YAHOO">whatever whatever</label> 

、およびスタイルそれらは幅と高さが固定されているので、あなたが望むほど高くても広くてもかまいません。trあなたのものの中に入ってください。

jQueryを使用してクリックすると、そのホバーリング効果をシミュレートしないで、trをクリックしてチェックボックスをクリックすることができました。したがって、私は<label>に落ちなければならなかった。