ダイナミックチェックボックスにマウスオーバー効果を追加する

Question

マウスオーバーをチェックボックスに実装する方法のヘルプをお願いしたいと思います。私が達成しようとしていないのは、誰かが対象の説明に基づいてチェックボックスにカーソルを向けるとマウスオーバーしたいと思うということです。

以下はダイナミックチェックボックスを生成するためのコードですが、マウスオーバーを追加する方法はわかりません。ありがとう。あなたがHTMLを生成するとき

<?php 

$subjects = $stmt->prepare("SELECT * FROM subjects"); 
$stmt->execute(); 

$cols = 5; 

do 
{ 
    echo "<tr>"; 
    for ($i = 1; $i <= $cols; $i++) 
    { 

     $row = $stmt->fetch(PDO::FETCH_ASSOC); 

     if ($row) 
     { 
      $sub_id = $row['sub_id']; 
      $sub_name = $row['sub_name']; 
      $sub_desc = $row['sub_desc'] 
?> 
     <table> 
     <tr><td> 

     <?php 
     echo '<input type="checkbox" sub_id="sub_id[]" name="sub_id[]" value="' . $id_tag . "\"" .'/>' . $tag_name . "\n"; 
     ?> 

     </td></tr> 
     </table> 

     <?php 

     } else { 
      echo "<td>&nbsp;</td>"; 
     } 
    } 
} while ($row); 
?> 

Answer 1

<script type="text/javascript"> 
     function myfn() { 
      var myInput = event.target; 
      myInput.style.fontSize = "1.2em"; 
      //some else... 
     } 
    </script> 
    <?php 
     echo '<input type="checkbox" onmouseover="myfn();" title="'.$row['sub_desc'].'" sub_id="sub_id[]" name="sub_id[]" value="' . $id_tag . "\"" .'/>' . $tag_name . "\n"; 
    ?> 

JavaScriptでイベントをアタッチするために多くの方法があります。別の実装ではCSSを使用しています。

<style type="text/css"> 
input:hover { font-size:1.2em; } 
</style> 

Answer 2

、あなたはCSSクラスを追加します。そして、あなたのスタイルシートで、ホバー効果を定義します。このように：

echo '<input type="checkbox" class="HoverOnCheckbox" sub_id="sub_id[]" name="sub_id[]" value="' 

.HoverOnCheckbox{ 
    color:green;} 

.HoverOnCheckbox:hover{ 
    color:red;} 

Answer 3

$(function() { 
$('input[type="checkbox"]').each(function() { 
    $(this).hover(function(){ 
    //mouseover effect 
    },function(){ 
    //mouseout effect 
    }); 
}); 
}); 

EDIT：@Repoxこれはjqueryの