错误 div 悬停时会改变颜色

Question

我一直在使用一些 HTML 遇到一个非常奇怪的问题。我有两个相互独立的 div。尽管它们都使用相同的 CSS，但每个 div 内部都有自己的数据。我尝试为每个 div 创建一个 "show more" 按钮，单击该按钮会展开 div，然后将按钮文本更改为 "show less"。
但是，我有一个问题，即单独页面中的每个 div 都可以正常工作，但是当两个 div 都像我希望的那样位于同一个 HTML 页面时，将鼠标悬停在按钮上有意想不到的副作用。悬停在第一个按钮上时，悬停在第一个按钮上会影响第二个按钮的颜色，而不是每个按钮在悬停时独立改变颜色（当您将鼠标悬停在第一个按钮上时，第一个按钮变为灰色，而第二个按钮变为栗色）。将鼠标悬停在第二个按钮上也会影响第二个按钮的颜色。
This is a jsfiddle of the issue
这是代码：

$(document).ready(function() {
      $("#period1").ready(function() {
        showall = $("#period1 .showallbutton");
        classgrade = $("#period1 .head tr .grade b");
        footbar = $("#period1 .foot");
        headbar = $("#period1 .head");
        gtbar = $("#period1 .gradestopbar");
        elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
        percentcolumn = $("#period1 .grades tr td:nth-child(5)");
        eccolumn = $("#period1 .grades tr td:nth-child(6) center");
        percentcolumn.each(function() {
          elem = $(this)
          percent = $(this).text();
          percentfloat = parseFloat(percent)
          if (percentfloat <= 69.9) {
            elem.parent().css("color", "#DD0000");
          } else if (percentfloat >= 70 && percentfloat <= 84.9) {
            elem.parent().css("color", "#000000");
          } else if (percentfloat >= 85) {
            elem.parent().css("color", "#00bb00")
          }
        });
        eccolumn.each(function() {
          elem = $(this)
          eccheckmark = elem.text();
          if (eccheckmark === "✔") {
            elem.parent().parent().css("color", "#008FFF")
          }
        });
        if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
          headbar.css("background-color", "#1EC53A");
          gtbar.css("background-color", "#1EC53A");
          footbar.css("background-color", "#1A9AFF")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#008FFF99");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#1A9AFF")
          });
        } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
          headbar.css("background-color", "#DD0000");
          gtbar.css("background-color", "#DD0000");
          footbar.css("background-color", "#DD0000");
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#AA0000");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#DD0000");
          });
        } else {
          headbar.css("background-color", "black");
          gtbar.css("background-color", "black");
          footbar.css("background-color", "black");
          showall.css("color", "white")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "gray");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "black");
          });
        }
        showall.click(function() {
          if (elementshidden.css("display") === "table-row") {
            elementshidden.hide();
            showall.text("Show More")
          } else if (elementshidden.css("display") === "none") {
            elementshidden.show();
            showall.text("Show Less");
          }
        });
      });
    $("#period2").ready(function() {
      showall = $("#period2 .showallbutton");
      classgrade = $("#period2 .head tr .grade b");
      footbar = $("#period2 .foot");
      headbar = $("#period2 .head");
      gtbar = $("#period2 .gradestopbar");
      elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
      percentcolumn = $("#period2 .grades tr td:nth-child(5)");
      eccolumn = $("#period2 .grades tr td:nth-child(6) center");
      percentcolumn.each(function() {
        elem = $(this)
        percent = $(this).text();
        percentfloat = parseFloat(percent)
        if (percentfloat <= 69.9) {
          elem.parent().css("color", "#DD0000");
        } else if (percentfloat >= 70 && percentfloat <= 84.9) {
          elem.parent().css("color", "#000000");
        } else if (percentfloat >= 85) {
          elem.parent().css("color", "#00bb00")
        }
      });
      eccolumn.each(function() {
        $(this).parent().parent().css("color", "#008FFF")
      });
      if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
        headbar.css("background-color", "#1EC53A");
        gtbar.css("background-color", "#1EC53A");
        footbar.css("background-color", "#1A9AFF")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#008FFF99");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#1A9AFF")
        });
      } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
        headbar.css("background-color", "#DD0000");
        gtbar.css("background-color", "#DD0000");
        footbar.css("background-color", "#DD0000");
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#AA0000");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#DD0000");
        });
      } else {
        headbar.css("background-color", "black");
        gtbar.css("background-color", "black");
        footbar.css("background-color", "black");
        showall.css("color", "white")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "gray");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "black");
        });
      }
      showall.click(function() {
        if (elementshidden.css("display") === "table-row") {
          elementshidden.hide();
          showall.text("Show More")
        } else if (elementshidden.css("display") === "none") {
          elementshidden.show();
          showall.text("Show Less");
        }
      });
    });
  });

    body {
      font-family: "Poppins", sans-serif;
      margin: 0 auto;
      padding: 15px;
    }
    .maincontainer {
      padding-bottom: 15px;
    }
    .grades {
      border-collapse: collapse;
      width: 100%;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .grades td, .grades th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .grades tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .grades tr:nth-child(2n+3) {
      background-color: #ffffff;
      color: black;
    }

    .grades tr:not(:nth-last-child(-n+5)) {
      display: none;
    }

    .grades tr:first-child {
      display: table-row;
    }

    .grades tr:not(.gradestopbar):hover {
      background-color: #ddd;
    }

    .grades th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    .gradestopbar {
      border-top: 0.5px solid black;
      color: white;
    }

    .gradestopbar th {
      border: 1px solid black;
    }

    .datedue {
      width: 13%;
    }

    .assigned {
      width: 13%;
    }

    .assignment {
      width: 32%;
    }

    .scorefraction {
      width: 13%;
    }

    .scorepercent {
      width: 13%;
    }

    .extracreditcheckbox {
      width: 8%;
    }

    .notgradedcheckbox {
      width: 8%;
    }

    .head {
      border-collapse: separate;
      width: 100%;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 0.5px solid black;
    }

    .head th {
      padding-top: 12px;
      padding-bottom: 12px;
      color: white;
    }

    .foot {
      font-size: 27px;
      border-collapse: separate;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      border: 2px solid black;
    }

    .showallbutton {
      height: 40px;
      width: 60%;
      border: none;
      background-color: white;
      font-family: "Poppins", sans-serif;
      font-size: 20px;
      cursor: pointer;
      background-color: transparent;
    }

    .showallbutton:focus {
      outline: 0;
    }

    .grade {
      font-size: 27px;
      width: 10%;
      text-align: center;
    }

    .course {
      font-size: 24px;
      width: 45%;
      text-align: center;
    }

    .teacher {
      font-size: 24px;
      padding-right: 50px;
      width: 45%;
      text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 1: <b>Adv Mathemagic II</b>
        </th>
        <th class="grade">
          <b>B-</b>
        </th>
        <th class="teacher">
          <b>Johnson, John</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/20/2018
        </td>
        <td>
          01/20/2018
        </td>
        <td>
          Mathemagic Practical Exam
        </td>
        <td>
          <sup>87</sup>&#8260;<sub>100</sub>
        </td>
        <td>
          87%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>

          01/21/2018

        </td>
        <td>

          01/21/2018

        </td>
        <td>

          Participation

        </td>
        <td>

          <sup>15</sup>&#8260;<sub>30</sub>

        </td>
        <td>

          50%

        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Extra Credit Assignment
        </td>
        <td>
          <sup>5</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          100%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Graphing
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>1</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 1
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 2
        </td>
        <td>
          <sup>2</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          66.6%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 3
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 4
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 5
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 6
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
    <div id="period2" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 2: <b>Honors PE 5</b>
        </th>
        <th class="grade">
          <b>F</b>
        </th>
        <th class="teacher">
          <b>Daveson, Dave</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/01/2018
        </td>
        <td>
          01/01/2018
        </td>
        <td>
          Volleyball Bouncing Test
        </td>
        <td>
          <sup>12</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          60%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/21/2018
        </td>
        <td>
          01/21/2018
        </td>
        <td>
          January Participation
        </td>
        <td>
          <sup>30</sup>&#8260;<sub>30</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Basketball into Trashcan Test
        </td>
        <td>
          <sup>18</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          90%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Track and Field Sprinting Test
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          5%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          February Participation
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Swimming Test
        </td>
        <td>
          <sup>15</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          75%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          GSW Extra Credit
        </td>
        <td>
          <sup>4</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          80%
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>

您可以看到，当您将光标移到第一个按钮上时，它会更改第二个按钮的颜色，而不会影响第一个按钮。本质上，第一个 "show more" 按钮仅用作控制第二个 div 的按钮。它对它应该工作的 div 没有任何作用。再一次，两个 div 在它们自己的 HTML 文件中时都可以正常工作，但放在一起时会失败。

提前致谢！

注意：html 中的所有信息都是假的，并且已被替换以保护隐私。但我不认为这是任何问题的原因。

Answer 1

肯定有很多代码需要查看，但我看到了你的问题。您引用的是基于 showAll class 的两个按钮。由于两者具有相同的 class，因此每个按钮都会调用悬停事件。

您需要为每个按钮指定一个 ID topButton 和 bottomButton。

从那里您可以使用以下方法直接单独访问每个按钮：

document.getElementById("topButton")

使用.style改变每个按钮的CSS。

Answer 2

问题是您所有的变量，如 showall、classgrade 等都是全局变量。所以 hover 事件处理程序被附加到正确的按钮，但是当悬停事件被触发时， footbar 变量指的是 #period2 内的 footbar 并且效果得到应用于底部按钮。

您只需在函数中声明局部变量，如下所示。

$(document).ready(function() {
      $("#period1").ready(function() {
        var showall = $("#period1 .showallbutton");
        var classgrade = $("#period1 .head tr .grade b");
        var footbar = $("#period1 .foot");
        var headbar = $("#period1 .head");
        var gtbar = $("#period1 .gradestopbar");
        var elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
        var percentcolumn = $("#period1 .grades tr td:nth-child(5)");
        var eccolumn = $("#period1 .grades tr td:nth-child(6) center");
        percentcolumn.each(function() {
          elem = $(this)
          percent = $(this).text();
          percentfloat = parseFloat(percent)
          if (percentfloat <= 69.9) {
            elem.parent().css("color", "#DD0000");
          } else if (percentfloat >= 70 && percentfloat <= 84.9) {
            elem.parent().css("color", "#000000");
          } else if (percentfloat >= 85) {
            elem.parent().css("color", "#00bb00")
          }
        });
        eccolumn.each(function() {
          elem = $(this)
          eccheckmark = elem.text();
          if (eccheckmark === "✔") {
            elem.parent().parent().css("color", "#008FFF")
          }
        });
        if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
          headbar.css("background-color", "#1EC53A");
          gtbar.css("background-color", "#1EC53A");
          footbar.css("background-color", "#1A9AFF")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#008FFF99");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#1A9AFF")
          });
        } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
          headbar.css("background-color", "#DD0000");
          gtbar.css("background-color", "#DD0000");
          footbar.css("background-color", "#DD0000");
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#AA0000");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#DD0000");
          });
        } else {
          headbar.css("background-color", "black");
          gtbar.css("background-color", "black");
          footbar.css("background-color", "black");
          showall.css("color", "white")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "gray");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "black");
          });
        }
        showall.click(function() {
          if (elementshidden.css("display") === "table-row") {
            elementshidden.hide();
            showall.text("Show More")
          } else if (elementshidden.css("display") === "none") {
            elementshidden.show();
            showall.text("Show Less");
          }
        });
      });
    $("#period2").ready(function() {
      var showall = $("#period2 .showallbutton");
      var classgrade = $("#period2 .head tr .grade b");
      var footbar = $("#period2 .foot");
      var headbar = $("#period2 .head");
      var gtbar = $("#period2 .gradestopbar");
      var elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
      var percentcolumn = $("#period2 .grades tr td:nth-child(5)");
      var eccolumn = $("#period2 .grades tr td:nth-child(6) center");
      percentcolumn.each(function() {
        elem = $(this)
        percent = $(this).text();
        percentfloat = parseFloat(percent)
        if (percentfloat <= 69.9) {
          elem.parent().css("color", "#DD0000");
        } else if (percentfloat >= 70 && percentfloat <= 84.9) {
          elem.parent().css("color", "#000000");
        } else if (percentfloat >= 85) {
          elem.parent().css("color", "#00bb00")
        }
      });
      eccolumn.each(function() {
        $(this).parent().parent().css("color", "#008FFF")
      });
      if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
        headbar.css("background-color", "#1EC53A");
        gtbar.css("background-color", "#1EC53A");
        footbar.css("background-color", "#1A9AFF")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#008FFF99");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#1A9AFF")
        });
      } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
        headbar.css("background-color", "#DD0000");
        gtbar.css("background-color", "#DD0000");
        footbar.css("background-color", "#DD0000");
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#AA0000");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#DD0000");
        });
      } else {
        headbar.css("background-color", "black");
        gtbar.css("background-color", "black");
        footbar.css("background-color", "black");
        showall.css("color", "white")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "gray");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "black");
        });
      }
      showall.click(function() {
        if (elementshidden.css("display") === "table-row") {
          elementshidden.hide();
          showall.text("Show More")
        } else if (elementshidden.css("display") === "none") {
          elementshidden.show();
          showall.text("Show Less");
        }
      });
    });
  });

    body {
      font-family: "Poppins", sans-serif;
      margin: 0 auto;
      padding: 15px;
    }
    .maincontainer {
      padding-bottom: 15px;
    }
    .grades {
      border-collapse: collapse;
      width: 100%;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .grades td, .grades th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .grades tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .grades tr:nth-child(2n+3) {
      background-color: #ffffff;
      color: black;
    }

    .grades tr:not(:nth-last-child(-n+5)) {
      display: none;
    }

    .grades tr:first-child {
      display: table-row;
    }

    .grades tr:not(.gradestopbar):hover {
      background-color: #ddd;
    }

    .grades th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    .gradestopbar {
      border-top: 0.5px solid black;
      color: white;
    }

    .gradestopbar th {
      border: 1px solid black;
    }

    .datedue {
      width: 13%;
    }

    .assigned {
      width: 13%;
    }

    .assignment {
      width: 32%;
    }

    .scorefraction {
      width: 13%;
    }

    .scorepercent {
      width: 13%;
    }

    .extracreditcheckbox {
      width: 8%;
    }

    .notgradedcheckbox {
      width: 8%;
    }

    .head {
      border-collapse: separate;
      width: 100%;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 0.5px solid black;
    }

    .head th {
      padding-top: 12px;
      padding-bottom: 12px;
      color: white;
    }

    .foot {
      font-size: 27px;
      border-collapse: separate;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      border: 2px solid black;
    }

    .showallbutton {
      height: 40px;
      width: 60%;
      border: none;
      background-color: white;
      font-family: "Poppins", sans-serif;
      font-size: 20px;
      cursor: pointer;
      background-color: transparent;
    }

    .showallbutton:focus {
      outline: 0;
    }

    .grade {
      font-size: 27px;
      width: 10%;
      text-align: center;
    }

    .course {
      font-size: 24px;
      width: 45%;
      text-align: center;
    }

    .teacher {
      font-size: 24px;
      padding-right: 50px;
      width: 45%;
      text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 1: <b>Adv Mathemagic II</b>
        </th>
        <th class="grade">
          <b>B-</b>
        </th>
        <th class="teacher">
          <b>Johnson, John</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/20/2018
        </td>
        <td>
          01/20/2018
        </td>
        <td>
          Mathemagic Practical Exam
        </td>
        <td>
          <sup>87</sup>&#8260;<sub>100</sub>
        </td>
        <td>
          87%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>

          01/21/2018

        </td>
        <td>

          01/21/2018

        </td>
        <td>

          Participation

        </td>
        <td>

          <sup>15</sup>&#8260;<sub>30</sub>

        </td>
        <td>

          50%

        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Extra Credit Assignment
        </td>
        <td>
          <sup>5</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          100%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Graphing
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>1</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 1
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 2
        </td>
        <td>
          <sup>2</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          66.6%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 3
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 4
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 5
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 6
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
    <div id="period2" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 2: <b>Honors PE 5</b>
        </th>
        <th class="grade">
          <b>F</b>
        </th>
        <th class="teacher">
          <b>Daveson, Dave</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/01/2018
        </td>
        <td>
          01/01/2018
        </td>
        <td>
          Volleyball Bouncing Test
        </td>
        <td>
          <sup>12</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          60%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/21/2018
        </td>
        <td>
          01/21/2018
        </td>
        <td>
          January Participation
        </td>
        <td>
          <sup>30</sup>&#8260;<sub>30</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Basketball into Trashcan Test
        </td>
        <td>
          <sup>18</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          90%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Track and Field Sprinting Test
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          5%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          February Participation
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Swimming Test
        </td>
        <td>
          <sup>15</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          75%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          GSW Extra Credit
        </td>
        <td>
          <sup>4</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          80%
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>

Answer 3

您需要在 ready 函数中使用不同的变量。您声明变量的方式使它们具有全局范围，这就是您的问题所在。我做了很少的改动，你会想完成这个，用 const、let 或 var 关键字

声明你的变量

$(document).ready(function() {
      $("#period1").ready(function() {
        const showall = $("#period1 .showallbutton");
        const classgrade = $("#period1 .head tr .grade b");
        const footbar = $("#period1 .foot");
        const headbar = $("#period1 .head");
        const gtbar = $("#period1 .gradestopbar");
        const elementshidden = $("#period1 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
        const percentcolumn = $("#period1 .grades tr td:nth-child(5)");
        const eccolumn = $("#period1 .grades tr td:nth-child(6) center");
        percentcolumn.each(function() {
          elem = $(this)
          percent = $(this).text();
          percentfloat = parseFloat(percent)
          if (percentfloat <= 69.9) {
            elem.parent().css("color", "#DD0000");
          } else if (percentfloat >= 70 && percentfloat <= 84.9) {
            elem.parent().css("color", "#000000");
          } else if (percentfloat >= 85) {
            elem.parent().css("color", "#00bb00")
          }
        });
        eccolumn.each(function() {
          elem = $(this)
          eccheckmark = elem.text();
          if (eccheckmark === "✔") {
            elem.parent().parent().css("color", "#008FFF")
          }
        });
        if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
          headbar.css("background-color", "#1EC53A");
          gtbar.css("background-color", "#1EC53A");
          footbar.css("background-color", "#1A9AFF")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#008FFF99");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#1A9AFF")
          });
        } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
          headbar.css("background-color", "#DD0000");
          gtbar.css("background-color", "#DD0000");
          footbar.css("background-color", "#DD0000");
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#AA0000");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "#DD0000");
          });
        } else {
          headbar.css("background-color", "black");
          gtbar.css("background-color", "black");
          footbar.css("background-color", "black");
          showall.css("color", "white")
          showall.hover(function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "gray");
          }, function() {
            footbar.css({
              "transition": "all 0.5s",
              "-webkit-transition": "all 0.5s",
              "-o-transition": "all 0.5s",
              "-moz-transition": "all 0.5s"
            });
            footbar.css("background-color", "black");
          });
        }
        showall.click(function() {
          if (elementshidden.css("display") === "table-row") {
            elementshidden.hide();
            showall.text("Show More")
          } else if (elementshidden.css("display") === "none") {
            elementshidden.show();
            showall.text("Show Less");
          }
        });
      });
    $("#period2").ready(function() {
      showall = $("#period2 .showallbutton");
      classgrade = $("#period2 .head tr .grade b");
      footbar = $("#period2 .foot");
      headbar = $("#period2 .head");
      gtbar = $("#period2 .gradestopbar");
      elementshidden = $("#period2 .grades tr:not(:nth-last-child(-n+5)):not(:first-child)");
      percentcolumn = $("#period2 .grades tr td:nth-child(5)");
      eccolumn = $("#period2 .grades tr td:nth-child(6) center");
      percentcolumn.each(function() {
        elem = $(this)
        percent = $(this).text();
        percentfloat = parseFloat(percent)
        if (percentfloat <= 69.9) {
          elem.parent().css("color", "#DD0000");
        } else if (percentfloat >= 70 && percentfloat <= 84.9) {
          elem.parent().css("color", "#000000");
        } else if (percentfloat >= 85) {
          elem.parent().css("color", "#00bb00")
        }
      });
      eccolumn.each(function() {
        $(this).parent().parent().css("color", "#008FFF")
      });
      if (classgrade.text()[0] === "A" || classgrade.text() === "B+") {
        headbar.css("background-color", "#1EC53A");
        gtbar.css("background-color", "#1EC53A");
        footbar.css("background-color", "#1A9AFF")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#008FFF99");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#1A9AFF")
        });
      } else if (classgrade.text()[0] === "D" || classgrade.text()[0] === "F") {
        headbar.css("background-color", "#DD0000");
        gtbar.css("background-color", "#DD0000");
        footbar.css("background-color", "#DD0000");
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#AA0000");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "#DD0000");
        });
      } else {
        headbar.css("background-color", "black");
        gtbar.css("background-color", "black");
        footbar.css("background-color", "black");
        showall.css("color", "white")
        showall.hover(function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "gray");
        }, function() {
          footbar.css({
            "transition": "all 0.5s",
            "-webkit-transition": "all 0.5s",
            "-o-transition": "all 0.5s",
            "-moz-transition": "all 0.5s"
          });
          footbar.css("background-color", "black");
        });
      }
      showall.click(function() {
        if (elementshidden.css("display") === "table-row") {
          elementshidden.hide();
          showall.text("Show More")
        } else if (elementshidden.css("display") === "none") {
          elementshidden.show();
          showall.text("Show Less");
        }
      });
    });
  });

    body {
      font-family: "Poppins", sans-serif;
      margin: 0 auto;
      padding: 15px;
    }
    .maincontainer {
      padding-bottom: 15px;
    }
    .grades {
      border-collapse: collapse;
      width: 100%;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .grades td, .grades th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .grades tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    .grades tr:nth-child(2n+3) {
      background-color: #ffffff;
      color: black;
    }

    .grades tr:not(:nth-last-child(-n+5)) {
      display: none;
    }

    .grades tr:first-child {
      display: table-row;
    }

    .grades tr:not(.gradestopbar):hover {
      background-color: #ddd;
    }

    .grades th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    .gradestopbar {
      border-top: 0.5px solid black;
      color: white;
    }

    .gradestopbar th {
      border: 1px solid black;
    }

    .datedue {
      width: 13%;
    }

    .assigned {
      width: 13%;
    }

    .assignment {
      width: 32%;
    }

    .scorefraction {
      width: 13%;
    }

    .scorepercent {
      width: 13%;
    }

    .extracreditcheckbox {
      width: 8%;
    }

    .notgradedcheckbox {
      width: 8%;
    }

    .head {
      border-collapse: separate;
      width: 100%;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: 0.5px solid black;
    }

    .head th {
      padding-top: 12px;
      padding-bottom: 12px;
      color: white;
    }

    .foot {
      font-size: 27px;
      border-collapse: separate;
      width: 100%;
      text-align: center;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      border: 2px solid black;
    }

    .showallbutton {
      height: 40px;
      width: 60%;
      border: none;
      background-color: white;
      font-family: "Poppins", sans-serif;
      font-size: 20px;
      cursor: pointer;
      background-color: transparent;
    }

    .showallbutton:focus {
      outline: 0;
    }

    .grade {
      font-size: 27px;
      width: 10%;
      text-align: center;
    }

    .course {
      font-size: 24px;
      width: 45%;
      text-align: center;
    }

    .teacher {
      font-size: 24px;
      padding-right: 50px;
      width: 45%;
      text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="period1" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 1: <b>Adv Mathemagic II</b>
        </th>
        <th class="grade">
          <b>B-</b>
        </th>
        <th class="teacher">
          <b>Johnson, John</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/20/2018
        </td>
        <td>
          01/20/2018
        </td>
        <td>
          Mathemagic Practical Exam
        </td>
        <td>
          <sup>87</sup>&#8260;<sub>100</sub>
        </td>
        <td>
          87%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>

          01/21/2018

        </td>
        <td>

          01/21/2018

        </td>
        <td>

          Participation

        </td>
        <td>

          <sup>15</sup>&#8260;<sub>30</sub>

        </td>
        <td>

          50%

        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Extra Credit Assignment
        </td>
        <td>
          <sup>5</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          100%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Graphing
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>1</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 1
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 2
        </td>
        <td>
          <sup>2</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          66.6%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 3
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 4
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 5
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Extra Assignment 6
        </td>
        <td>
          <sup>3</sup>&#8260;<sub>3</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>
    <div id="period2" class="maincontainer">
    <table class="head" width=1500px>
      <tr>
        <th class="course">
          Period 2: <b>Honors PE 5</b>
        </th>
        <th class="grade">
          <b>F</b>
        </th>
        <th class="teacher">
          <b>Daveson, Dave</b>
        </th>
      </tr>
    </table>
    <table class="grades">
      <tr class="gradestopbar">
        <th class="datedue">
          <label>
       Date Due
      </label>
        </th>
        <th class="assigned">
          <label>
       Assigned
      </label>
        </th>
        <th class="assignment">
          <label>
       Assignment
      </label>
        </th>
        <th class="scorefraction">
          <label>
        Score
      </label>
        </th>
        <th class="scorepercent">
          <label>
        Percent
      </label>
        </th>
        <th class="extracreditcheckbox">
          <label>
       Extra
       <br>
       Credit
      </label>
        </th>
        <th class="notgradedcheckbox">
          <label>
       Not
       <br>
       Graded
      </label>
        </th>
      </tr>
      <tr>
        <td>
          01/01/2018
        </td>
        <td>
          01/01/2018
        </td>
        <td>
          Volleyball Bouncing Test
        </td>
        <td>
          <sup>12</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          60%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/21/2018
        </td>
        <td>
          01/21/2018
        </td>
        <td>
          January Participation
        </td>
        <td>
          <sup>30</sup>&#8260;<sub>30</sub>
        </td>
        <td>
          100%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Basketball into Trashcan Test
        </td>
        <td>
          <sup>18</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          90%
        </td>
        <td>
          <center>✔</center>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/22/2018
        </td>
        <td>
          01/22/2018
        </td>
        <td>
          Track and Field Sprinting Test
        </td>
        <td>
          <sup>1</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          5%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          February Participation
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          Swimming Test
        </td>
        <td>
          <sup>15</sup>&#8260;<sub>20</sub>
        </td>
        <td>
          75%
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
      <tr>
        <td>
          01/23/2018
        </td>
        <td>
          01/23/2018
        </td>
        <td>
          GSW Extra Credit
        </td>
        <td>
          <sup>4</sup>&#8260;<sub>5</sub>
        </td>
        <td>
          80%
        </td>
        <td>
          <center>
            ✔
          </center>
        </td>
        <td>
        </td>
      </tr>
    </table>
    <table class="foot">
      <tr class="showall">
        <td>
          <button class="showallbutton">Show More</button>
        </td>
      </tr>
    </table>
  </div>

错误 div 悬停时会改变颜色

Wrong div changes color when hovered over

html

javascript

css

jquery

jquery-hover