0

还提供有关如何创建链接的提示，是否只是 A 等还有我应该学习的更常见的 JQuery 命令。需要稍微指出正确的方向。

谢谢

<!DOCTYPE html> 
<html>
  <head>
    <title></title>
    <style> 
      table, th, td  {
        border: 1px solid black; 
      }

      tr.nice td {
        background: #FAFAD2; 
      }

      tr.mouseon td {
        background: #1E90FF; 
      }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type ="text/javascript"> 
      $("table1 tr).addClass("nice); 
      $("#table1 th").mouseover(function() { $(this).addClass("mouseon"); 
      $("#table1 th").mouseout(function() {  $(this).removeClass("mouseon"); 
    </script>
  </head>
  <body>
    <div id="table1">
      <table>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
        </tr>
          <tr>
            <td>A1</td>
            <td>B1</td>
          </tr>
      </table>
    </div>
  </body>
</html>
4

3 回答 3

1

我想你不需要 jquery，简单的 css 就可以了。正如 Patsy Issa 所说，只需使用 css 即可:hover。

tr th:hover {
    background: #1E90FF; 
}

检查这个http://jsfiddle.net/PbJmB/1/

于 2013-09-27T07:45:58.147 回答
0

您有很多缺少“和 () 的错误。您应该使用带有语法高亮的编辑器，如 Notepad++ 或 Dreamweaver。我发布了 2 种方法来做到这一点。

你的脚本标签是错误的。固定的：

<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

方法#1

<script type="text/javascript"> 
$(document).ready(function(){
  $("#table1 tr").addClass("nice"); 
  $("#table1 th").on("mouseover", function() {
    $(this).addClass("mouseon");
  }); 
  $("#table1 th").on("mouseout", function() { 
    $(this).removeClass("mouseon");
  });
});
</script>

方法#2

<script type="text/javascript"> 
$(document).ready(function(){
  $("#table1 tr").addClass("nice"); 
  $("#table1 th").hover(function() {
    // mouseON
    $(this).addClass("mouseon");
  }, function(){
    // mouseOUT
    $(this).removeClass("mouseon");
  }); 
});
</script>

简单的

你也可以用 CSS 来做：

<style type="text/css">
#table1 th {
   background: black; /* standart bg */
}
#table1 th:hover {
   background: red /* new bg */
}
</style>
于 2013-09-27T07:43:36.370 回答
0

您需要对脚本和 CSS 进行以下更改：

脚本 ：

$(document).ready(function(){
$("#table1 table tr").addClass("nice"); 
$("#table1 th").hover(function() { 
    $(this).addClass("mouseon"); 
},
    function() {
        $(this).removeClass("mouseon"); 
    });
});

CSS：

table, th, td  {
    border: 1px solid black; 
}

tr.nice td {
    background:  #FAFAD2; 
}

.mouseon {
    background: #1E90FF; 
}
于 2013-09-27T07:49:50.463 回答