【发布时间】：2018-03-04 19:11:10
【问题描述】：
我一直在使用的一些 HTML 存在一个非常奇怪的问题。我有两个彼此独立的 div。尽管它们都使用相同的 CSS，但每个 div 内部都有自己的数据。我尝试为每个 div 创建一个“显示更多”按钮，单击该按钮会展开 div，然后将按钮文本更改为“显示更少”。
但是，我有一个问题，即单独页面中的每个 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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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>⁄<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 的按钮。它对它应该工作的 div 没有任何作用。同样，这两个 div 在它们自己的 HTML 文件中时都能正常工作，但放在一起时会失败。
提前致谢！
注意：html 中的所有信息都是假的，已被替换以保护隐私。但我不认为这是导致任何问题的原因。
【问题讨论】：
-
这不是很多代码供我们阅读吗？
-
这就是小提琴的用途。
-
我不太清楚如何在不搞砸代码的情况下减少代码，因为我不太擅长 html 或 JavaScript。如果里面有很多没用的东西，请见谅。
-
Ref: “这就是小提琴的用途”。小提琴是提供使用尽可能少的代码来重现问题的方法。又名minimal reproducible example。不这样做表明缺乏研究和不尊重其他人的时间。
标签： javascript jquery html css jquery-hover