jquery - 突出显示 jquery 插件数据表中的悬停行

Question

我使用 jquery 插件数据表来显示我的数据，它工作正常，我使用 ajax 从 php 获取数据，但是当我想在 table 周围移动时突出显示悬停的行时我遇到了问题。它不起作用。但是当我在其他表中使用脚本时，它起作用了。我在 chrome 控制台中暂停了一些代码，它工作正常，我感到困惑，我该如何解决这个问题。脚本在这里:

  <script type="text/javascript">
$( document ).ready(function() {
    $('#example').dataTable({
                     "bProcessing": true,
                     "sAjaxSource": "testConn2008.php",
                     "bAutoWidth": true,
                     "aoColumns": [
                            { mData: '\u533a\u57df' } ,
                            { mData: '\u6708\u4efd' },
                            { mData: '\u7535\u8111\u7f16\u53f7' },
                            { mData: '\u7528\u6237\u518c\u53f7' } ,
                            { mData: '\u6c34\u8868\u7c7b\u578b' }
                    ]
            });
});
</script>
  <script type="text/javascript">
     $(document).ready(function() {  
         $("#example tbody tr").mouseover(function() {  
                  $(this).addClass("over");  
             });  
         $("#example tbody tr").mouseout(function() {  
                  $(this).removeClass("over");  
             });   

    }); 
  </script>
  <style type="text/css">
  tr.over td{  
background: #D6E8F8;  
font-weight: bold;  
}  
  </style>

Answer 1

我想知道你为什么要使用 jquery。简单的 CSS 就可以实现这一点。

#example td:hover
{
  background: #D6E8F8;  
  font-weight: bold;  
}