首页 / 技术问答 / Html问答列表 / 问答详情

HTML表行悬停仅适用于偶数行

我试图在HTML表格的每一行上创建一个CSS悬停效果-非常基本，我已经阅读了其他关于各种方法的线程.

我以前已经实现过很多次了，但是突然，随着一个新的表设计，我遇到了一个问题.悬停样式仅应用于even行，我不明白为什么这odd行没有应用悬停样式.请参见下面的工作代码.我包含了我try 过的每一种样式，但当然，一次只try 一种.

/* ==================================================
Table styling
================================================== */

.table {
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 0.8rem;
  overflow: clip;
}

th {
  font-weight: 500;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
}

.table-th,
.table td {
  padding: 8px;
  height: 40px;
  vertical-align: middle;
}

.table>thead>tr {
  background-color: #fbbf77;
}

tbody tr:nth-child(even) {
  background-color: #fce8c3;
}

tbody tr:nth-child(odd) {
  background-color: white !important;
}

.table__small {
  width: fit-content;
}

.table__wide {
  width: 100%;
}

.right-align {
  text-align: right;
}

.center-align {
  text-align: center;
}

.left-align {
  text-align: left;
}


/* ==================================================
Hover styling
// Including every hover style I tried here, but the 
// styling only works on even rows 
================================================== */

#project-deep-dive-table tbody tr:hover {
  background: lightblue;
}

#project-deep-dive-table-body tr:hover {
  background: lightblue;
}

tr:hover {
  background: lightblue;
}

#project-deep-dive-table-body tr:nth-child(even):hover {
  background: lightblue;
}

#project-deep-dive-table-body tr:nth-child(odd):hover {
  background: lightblue;
}
<div id="project-deep-dive-table-container" style="display: block;">
  <table id="project-deep-dive-table" class="table">
    <thead class="sticky table-header">
      <tr>
        <!-- assessments -->
        <th class="sticky left-align table-th">Assessments</th>
        <!-- risk -->
        <th class="sticky right-align table-th">Risk</th>
        <!-- counts -->
        <th class="sticky center-align table-th">Counts</th>
        <!-- collection date -->
        <th class="sticky center-align table-th">Collection Date</th>
        <!-- posts -->
        <th class="sticky right-align table-th">Posts</th>
        <!-- completed -->
        <th class="sticky right-align table-th">Completed</th>
      </tr>
    </thead>
    <tbody id="project-deep-dive-table-body">
      <tr>
        <td class="left-align projects-deeper-dive">Colt Spence</td>
        <td class="right-align bold">44%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/04/2024 to 02/10/2024</td>
        <td class="right-align">26</td>
        <td class="right-align">02/10/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">adversusjudaeos</td>
        <td class="right-align bold">90%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/04/2024 to 02/06/2024</td>
        <td class="right-align">100</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">AwakenedOutlaw</td>
        <td class="right-align bold">90%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/05/2024 to 02/06/2024</td>
        <td class="right-align">100</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">BigMad</td>
        <td class="right-align bold">73%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">01/31/2024 to 02/06/2024</td>
        <td class="right-align">33</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Clowns</td>
        <td class="right-align bold">90%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/01/2024 to 02/06/2024</td>
        <td class="right-align">116</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Derek</td>
        <td class="right-align bold">90%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">01/31/2024 to 02/06/2024</td>
        <td class="right-align">59</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Gun Digest</td>
        <td class="right-align bold">56%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">01/31/2024 to 02/06/2024</td>
        <td class="right-align">15</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Guy Jones</td>
        <td class="right-align bold">90%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/06/2024 to 02/06/2024</td>
        <td class="right-align">100</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Iam</td>
        <td class="right-align bold">56%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/04/2024 to 02/06/2024</td>
        <td class="right-align">100</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Jordi Massive</td>
        <td class="right-align bold">90%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">01/31/2024 to 02/06/2024</td>
        <td class="right-align">77</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">Trolls Gays</td>
        <td class="right-align bold">53%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/01/2024 to 02/03/2024</td>
        <td class="right-align">100</td>
        <td class="right-align">02/08/2024</td>
      </tr>
      <tr>
        <td class="left-align projects-deeper-dive">VictorNakba</td>
        <td class="right-align bold">58%</td>
        <td>
          <div class="counts-div">
            <div class="circle green">
              <div class="circle-text">0</div>
            </div>
            <div class="circle yellow">
              <div class="circle-text">0</div>
            </div>
            <div class="circle red">
              <div class="circle-text">0</div>
            </div>
          </div>
        </td>
        <td class="center-align">02/05/2024 to 02/06/2024</td>
        <td class="right-align">100</td>
        <td class="right-align">02/08/2024</td>
      </tr>
    </tbody>
  </table>
</div>

推荐答案

在您的css中，您的单行css有单词!important，这意味着无论您放置什么其他css，它都不会改变 colored颜色 .只要把它脱下来，它就可以正常工作了.


tbody tr:nth-child(odd) {
  background-color: white;
}

Html相关问答推荐

在浮动元素旁边垂直居中

将输入字段下方的两个按钮设置为两侧对齐

react ：事件和转发器在特定代码段中不起作用

在NzMessageService中传递动态TemplateRef- Angular 15

如何使用html的<；输入>；处理/绑定Angular 信号？

Bootstrap nav没有崩溃

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

如何使用 Flutter 构建 Chrome 扩展？

四开将一个 qmd 文档中的单词链接到另一个 qmd 文档中的单词

使用 popover api 和 `

一旦大于最大限制，JQuery 取消 Select 复选框

如何实现与内嵌图像对齐的自动换行？

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

如何正确地嵌套Flexbox

暗模式转换器

每次按下按钮时减小字体大小的 jquery 函数

圆形边框显示在该部分后面.怎么修？

在中心而不是边界处填充 svg 的背景

使用 CSS 的发光边框动画没有流畅的过渡

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630