Question

我按照Creating CSS3 Circles connected by lines创建了逐行连接的行，作为HTML表格的行元素。我还在悬停时启用了行突出显示。

我的代码可以在这里找到：

if(window.history.length <= 1)
    document.getElementById("button").style.display = "none";

问题是当我悬停并突出显示行时，我正在丢失连接圆圈的线条。（在这种情况下，连接两个圆圈的线条以高亮颜色消失。）

欣赏有关问题的一些见解。

Answer 1

此行为是您为伪元素 z-index的{{1}}属性指定的负值的结果。

删除li::before上声明的z-index属性，而不是在列表项（li::before）上声明z-index值，因为它是已经定位元素（li.data），将应用position: relative属性值，.eg：

z-index

代码段示范：

li.data {
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 2em;
    background: dodgerblue;
    margin: 0 1em;
    display: inline-block;
    color: white;
    position: relative;
    /* additional */
    z-index: 1;
}

ul.bigger {
  font-size: 1.3em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: green;
}

li.data {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 2em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
  /* additional */
  z-index: 1;
}

li.ack {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 2em;
  background: MediumSeaGreen;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before {
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: Gray;
}

li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active~li {
  background: lightblue;
}

.active~li::before {
  background: lightblue;
}

body {
  font-family: sans-serif;
  padding: 2em;
}

.table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: 8px;
}

.row1 {
  border: 1px solid #ddd;
  padding: 8px;
}

.retransmission {
  background-color: #0;
}

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ffff99;
}

.row2 {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

修改的

根据最近的发展（如评论中所述），而是在嵌套表格单元格标签上声明<h2 id="ack_summary">Summary</h2> <table style="width: 100%;"> <tr> <th>Data/Ack Distribution - transfer 1, Packets 17 - 25</th> </tr> <tr> <td> <br> <ul class="bigger highlight-active"> <li class="data">3</li> <li class="ack">3</li> </ul> <br> <h4>Cumulative Ack's distribution</h4> <div id="chartContainer121" class="chartContainer"></div> </td> </tr> </table>属性，例如：

z-index

这样，任何嵌套元素都不会被包含元素的td { z-index: 9; position: relative; /* required */ }属性遮挡。（展开下面的更新代码段以观察此行为）。

此外，您还可以恢复最初在background-color上声明的负z-index值。

li::before

ul.bigger {
  font-size: 1.3em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: green;
}

li.data {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 2em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li.ack {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 2em;
  background: MediumSeaGreen;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: Gray;
  z-index: -1;
}


li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active ~ li {
  background: lightblue;
}

.active ~ li::before {
  background: lightblue;
}

body {
  font-family: sans-serif;
  padding: 2em;
}

.table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

.row1 {
    border: 1px solid #ddd;
    padding: 8px;
}

.retransmission {
    background-color: #0;
}
tr:nth-child(odd){background-color: #f2f2f2;}

tr:hover {background-color: #ffff99;}

.row2 {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

/* Additional */

td {
    z-index: 9;
    position: relative;
}

我建议您进一步阅读以了解堆叠上下文以及这通常如何应用于<h2 id="ack_summary">Summary</h2> <table style="width: 100%;"> <tr> <th>Data/Ack Distribution - transfer 1, Packets 17 - 25</th> </tr> <tr> <td> <br> <ul class="bigger highlight-active"> <li class="data">3</li> <li class="ack">3</li> <li class="data">5</li> <li class="ack">2</li> </ul> <br> <h4>Cumulative Ack's distribution</h4> <div id="chartContainer121" class="chartContainer"></div> </td> </tr> </table>属性：

HTML：表格突出显示

1 个答案: