Question

还提供有关如何创建链接的提示，它只是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>

Answer 1

我猜你不需要jquery，简单的css可以做到这一点。正如Patsy Issa所说，只需使用css :hover。

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

选中此http://jsfiddle.net/PbJmB/1/

Answer 2

你有很多错误，缺少“和（）。你应该使用带有语法 - 突出显示的编辑器，如Notepad ++或Dreamweaver。我发布了两种方法来做到这一点。

您的脚本标记错误。修正：

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

Answer 3

您需要对脚本和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; 
}

我是JQuery的新手，我正在尝试创建一个翻转效果，目的是为链接做这个。

3 个答案: