Adding mouseover effect to dynamic checkbox - php

Question

I would like to ask for help on how to implement mouseover to checkbox. What I wan't to achieve is that I want to have mouseover when someone point the cursor to the checkbox based on subject description.
Below is my code to generate dynaminc checkbox but I don;t know how to add mouseover to it. thanks.
<?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> </td>";
}
}
} while ($row);
?>

Answer 1

When you generate the HTML, you add a CSS class. And then, in your stylesheet, you define a hover effect. Like this:
echo '<input type="checkbox" class="HoverOnCheckbox" sub_id="sub_id[]" name="sub_id[]" value="'
.HoverOnCheckbox{
color:green;}
.HoverOnCheckbox:hover{
color:red;}

Answer 2

<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";
?>
There's many way to attach events in JavaScript. Another implement is using CSS.
<style type="text/css">
input:hover { font-size:1.2em; }
</style>

Answer 3

$(function() {
$('input[type="checkbox"]').each(function() {
$(this).hover(function(){
//mouseover effect
},function(){
//mouseout effect
});
});
});
EDIT: as #Repox suggested this will work with jquery