向動態複選框添加鼠標懸停效果

我想問如何實現鼠標懸停複選框的幫助。我想要實現的是當有人將光標指向基於主題描述的複選框時，我想要進行鼠標懸停。向動態複選框添加鼠標懸停效果

下面是我的代碼來生成dynaminc複選框，但我不知道如何添加mouseover到它。謝謝。

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

來源

2011-12-16 webdev.gk

您可以發佈您的HTML呈現給瀏覽器？ PHP代碼不能解決客戶端問題，例如創建懸停效果。 – mrtsherman 2011-12-16 05:24:44

<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>

來源

2011-12-16 05:26:24 ijse

嗨，你能舉例說明如何顯示$ sub_desc = $ row ['sub_desc'];謝謝 – 2011-12-16 08:19:14

添加屬性`title`，它的值是`$ row ['sub_desc']` – ijse 2011-12-16 08:26:47

當您生成HTML時，您將添加一個CSS類。然後，在你的樣式表中，你定義了一個懸停效果。就像這樣：

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

.HoverOnCheckbox{ 
    color:green;} 

.HoverOnCheckbox:hover{ 
    color:red;}

來源

2011-12-16 05:24:58 frenchie

感謝傢伙的建議。我無法讓它工作。我想顯示$ sub_desc = $ row ['sub_desc'];在鼠標上的值。你能提供示例代碼 – 2011-12-16 08:14:41

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

編輯：@Repox建議，這將與jQuery工作

來源

2011-12-16 05:36:38

向動態複選框添加鼠標懸停效果

回答

相關問題