Question

我想请求有关如何将mouseover实现为复选框的帮助。我想要实现的是，当有人根据主题描述将光标指向复选框时，我想要鼠标悬停。

下面是我生成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

生成HTML时，添加CSS类。然后，在样式表中定义悬停效果。像这样：

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

有许多方法可以在JavaScript中附加事件。另一个工具是使用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
  });
});
});

编辑：正如@Repox建议的那样，这将适用于jquery

将鼠标悬停效果添加到动态复选框

3 个答案: