javascript - 在悬停时为多行和多列中的元素显示表格
问题描述
我正在尝试在悬停时为行和列中的元素显示一个表格。注意：行和列中的数据也在手风琴中。数据分为 4 列，可以是任意数量的行。悬停时显示的每个表格的数据包含 5 列，可以是任意数量的行。
我编写了以下 CSS/HTML，当手风琴打开时显示所有 4 列数据（即骑师姓名和骑行次数）。注意：这些元素中的每一个都将有一个关联的表格在悬停时显示。
正如您将看到的，我设法在第一行中显示悬停时每个元素的关联表，但是，我无法对剩余行和列中的任何后续元素执行相同操作。
注意：出于测试目的，我有意在悬停时将每个元素的突出显示为“红色”。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
#jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
#jockeys td,
#jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
#jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
#jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
#ShowJockey:hover+#jockeys {
display: block;
}
div.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
div.hoverPopUp td,
div.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
div.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
margin-top: 1em;
padding-top: 10px;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+div.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">ADAM HYERONIMUS HAS 5 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">JAMES INNES JR. HAS 1 RIDE.</a>
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">KERRIN MCEVOY HAS 6 RIDES.</a>
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">SAM CLIPPERTON HAS 1 RIDE.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JAMES MCDONALD HAS 6 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
</p>
</div>
</div>
</div>如果我尝试将相同的代码添加到 DIV(s) 列中的后续元素（即当前包含在段落标记中的元素，应该是第 2 行、第 3 行等等......，我失去列结构和格式，并且定义的href全部未对齐并且部分或完全隐藏，直到悬停。
注意：骑师姓名应按字母顺序从左到右出现。
另外但不如上述重要的是，显示的表格似乎受限于列的宽度。当我尝试扩大宽度时，表格的右侧被下一列隐藏（表格位于其右侧的列后面）。我还想知道是否有办法解决这个问题并在附加列的“顶部”（上方）显示表格，以便我可以扩大宽度。
为 HTML 的长度道歉，但我认为您需要了解发生了什么。
解决方案
一个 id 不能在一个页面上多次使用。所以我用
class. (#jockeys->.jockeys,#ShowJockey->.ShowJockey)您不能放入
div标签p。所以我们必须p用div.
简而言之，不可能将
<div>元素放在<p>DOM 中的 a 内，因为开始<div>标签会自动关闭<p>元素。参考
我做了一个片段。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
.jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
.ShowJockey:hover+.jockeys {
display: block;
}
.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
.hoverPopUp td,
.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
.parentDiv {
line-height: 16px;
letter-spacing: 1px;
padding-top: 10px;
text-align: left;
}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">hover here</a>
<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a> <div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a>
</div>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">hover here</a>
<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>同样在这里，我用一种更好的方法展示了表格。但是您必须为您的表格提供该data-hover-content属性。请参阅 1. 和 6. 链接。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
const links = document.querySelectorAll(".hoverHereToPopUp");
[...links].forEach(link => {
link.addEventListener("mouseover", handleMouseOver);
link.addEventListener("mousemove", handleMouseMove);
link.addEventListener("mouseleave", handleMouseLeave);
});
function handlePosition(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
let top = "";
if (!(e.target.getBoundingClientRect().top + wrapper.offsetHeight > innerHeight)) {
top = `${e.clientY + e.target.offsetHeight}px`;
} else {
top = `${e.clientY - (wrapper.offsetHeight + e.target.offsetHeight)}px`;
}
if (`${e.clientX -
wrapper.offsetWidth / 2}` <= 0) {
return `position: fixed; left: 0px; top:${top}`;
} else {
return `position: fixed; left: ${e.clientX -
wrapper.offsetWidth / 2}px; top:${top}`;
}
}
function handleMouseOver(e) {
const hoverContent = e.target.getAttribute("data-hover-content");
const ID = Math.random()
.toString(36)
.substr(2, 9);
const wrapper = document.createElement("DIV");
e.target.setAttribute("data-hover-id", ID);
wrapper.setAttribute("data-hover-wrapper", "");
wrapper.setAttribute("id", ID);
wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)");
wrapper.innerHTML = hoverContent;
document.body.append(wrapper);
wrapper.setAttribute("style", handlePosition(e));
}
function handleMouseLeave(e) {
const ID = e.target.getAttribute("data-hover-id");
document.getElementById(ID).style.opacity = 0;
document.getElementById(ID).style.transform = "scale(.8)";
setTimeout(() => {
document.getElementById(ID).remove();
}, 150);
}
function handleMouseMove(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
wrapper.setAttribute("style", handlePosition(e));
}
window.addEventListener('scroll', () => {
const wrapper = document.querySelector('[data-hover-wrapper]');
if (wrapper) wrapper.remove();
});.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
.jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
.ShowJockey:hover+.jockeys {
display: block;
}
.hoverPopUp {
border-collapse: collapse;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
background-color: #fff;
}
.hoverPopUp td,
.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
[data-hover-wrapper] {
transition: opacity .3s, transform .3s
}
.parentDiv {
line-height: 16px;
letter-spacing: 1px;
padding-top: 10px;
text-align: left;
}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here
</a>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>我压缩了表格的代码，因为 Stackoverflow 片段不允许太多代码。
这是另一个例子。（我认为最好）这适用于点击。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
const links = document.querySelectorAll(".hoverHereToPopUp");
[...links].forEach((link) => {
link.addEventListener("click", handleClick);
});
function handlePosition(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
if (`${e.target.getBoundingClientRect().left}` <= 0) {
return `position: fixed; left: 0px; top:${
e.target.getBoundingClientRect().top + 20
}`;
} else {
return `position: fixed; left: ${
e.target.getBoundingClientRect().left
}px; top:${e.target.getBoundingClientRect().top + 20}px`;
}
}
function handleClick(e) {
const others = document.querySelectorAll("[data-hover-wrapper]");
others.forEach((p) => {
p.style.opacity = 0;
p.style.transform = "scale(.8)";
setTimeout(() => {
p.remove();
}, 150);
});
const hoverContent = e.target.getAttribute("data-hover-content");
const ID = Math.random().toString(36).substr(2, 9);
const wrapper = document.createElement("DIV");
e.target.setAttribute("data-hover-id", ID);
wrapper.setAttribute("data-hover-wrapper", "");
wrapper.setAttribute("id", ID);
wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)");
wrapper.innerHTML = hoverContent;
document.body.append(wrapper);
wrapper.setAttribute("style", handlePosition(e));
}
document.addEventListener("click", (e) => {
const specifiedElement = document.querySelectorAll("[data-hover-wrapper]");
specifiedElement.forEach((p) => {
let isClickInside = p.contains(event.target);
if (
!isClickInside &&
!event.target.classList.contains("hoverHereToPopUp")
) {
const others = document.querySelectorAll("[data-hover-wrapper]");
others.forEach((p) => {
p.style.opacity = 0;
p.style.transform = "scale(.8)";
setTimeout(() => {
p.remove();
}, 150);
});
}
});
});/* I minified the css because stackoverflow does not allow to over 30000 character body. this css same with the above snippet.*/
.accordion{background-color:#388070;border:1px;border-bottom:10px;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:2px;color:#fff;cursor:pointer;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:2px;padding:12px;outline:0;text-align:left;transition:.4s;width:100%;margin:auto!important}.accordion:hover,.active{background-color:transparent;border:1px;border-color:#388070;border-style:solid;border-width:2px;color:#388070}.accordion:after{content:"\002B";color:#388070;font-size:12px;float:right;margin-left:5px}.active:after{color:#388070;content:"\2212"}.panel5{border:1px;border-bottom:10px;border-color:#f0f0f0;border-style:solid;border-width:2px;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:25px;display:none;background-color:#fff;overflow:hidden}.column{float:left;width:25%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff;column-gap:3px}.myrow{float:left;width:100%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff}.myrow:after{content:"";display:table;clear:both}a:link,a:visited{background-color:transparent;color:#07342a;display:inline-block;font-family:Lato,sans-serif;font-size:12px;text-align:center;text-decoration:none}a:active,a:hover{background-color:transparent;color:#303030;font-weight:700}.jockeys{border-collapse:collapse;display:none;font-family:Lato,sans-serif;font-size:12px;width:100%}.jockeys td,.jockeys th{border:1px solid #ddd;padding:8px}.jockeys th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;padding-top:12px;padding-bottom:12px;text-align:left}.jockeys tr:nth-child(even){background-color:#f2f2f2}.ShowJockey:hover+.jockeys{display:block}.hoverPopUp{border-collapse:collapse;font-family:Lato,sans-serif;font-size:9px;text-align:center;background-color:#fff}.hoverPopUp td,.hoverPopUp th{border:1px solid #ddd;padding:5px}.hoverPopUp th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;padding-top:5px;padding-bottom:5px;text-align:center}a.hoverHereToPopUp{background-color:#fff;color:#07342a;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;line-height:1.2;text-align:left}a:active,a:hover{background-color:transparent;color:red;font-weight:700}table.center{margin-left:auto;margin-right:auto;border-spacing:1}[data-hover-wrapper]{transition:opacity .3s,transform .3s}.parentDiv{line-height:16px;letter-spacing:1px;padding-top:10px;text-align:left}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here
</a>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a><div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>推荐阅读
- ios - Why do we override variables which were initially nil instead of simply setting them?
- python-3.x - 打印语句的 Python 3 向后兼容性
- excel - 具有日期范围的 SUMIFS ......但在 X 天之前和 X 天之后
- ruby-on-rails - 为什么 Rails 低级问题会导致模块丢失其常量？
- ms-access - Error setting variable to Null Value
- angular - How can I write a unit test for an Angular5 HttpInterceptor that opens a modal?
- jenkins - Jenkins is showing "zombie" pipeline runs after restart - how to purge?
- docker - Escape $ in variable passed to docker run command
- email - Is SES the only way to send email from Lambda?
- regex - 如何从 URL 中提取文件名？