동적 체크 박스에 마우스 오버 효과 추가

Question

체크 박스에 마우스 오버를 구현하는 방법에 대한 도움을 요청하고 싶습니다. 내가 달성 할 수없는 것은 누군가가 주제 설명에 따라 커서를 체크 박스로 향하게 할 때 마우스 오버를 원한다는 것입니다.

아래 코드는 dynaminc 체크 박스를 생성하는 코드이지만, 마우스 오버 기능을 추가하는 방법을 알지 못합니다. 감사.

<?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"; 
    ?> 

자바 스크립트 이벤트를 첨부 할 수있는 많은 방법이있다. 다른 도구는 CSS를 사용합니다.

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

Answer 2

HTML을 생성 할 때 CSS 클래스를 추가합니다. 그런 다음 스타일 시트에서 호버 (hover) 효과를 정의합니다. 이처럼 :

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

편집 : @Repox이 jQuery를 함께 작동합니다 제안