Question

我在尝试删除从表格顶行创建的悬停功能时遇到了麻烦。

我正在尝试创建一个可用于比较不同产品的表。我想对整个表使用悬停函数，但是在顶行（我稍后将放置图像的位置）。如何仅删除顶行的悬停？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compare Table</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<table style="width:100%" class="hoverTable">
  <tr>
  <td class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>
  <tr>
   <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td id="check">&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td id="x01">&#x2716</td>
    <td>&#x2716</td> 
    <td>&#x2716</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
</table>

CSS：

th,td {
    padding: 15px;
    text-align: center;
}

.hoverTable tr:nth-child(even) {
    background-color: #eee;
}
.hoverTable tr:nth-child(odd) {
   background-color:#fff;
}

.blankcell {
    background: none!important; 
    border: none!important;
}


/* HOVER FUNCTION */
.hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; 
        border: #000000 1px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #ffffff;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #86D694;
    }

/* Check and X-Mark Coloring*/
#check {
    color: #1CF200;
}
#x01 {
    color: #ff6969;
}

感谢您的时间！:)

Answer 1

试试这个：

.hoverTable tr:nth-child(n+2):hover {
      background-color: #86D694;
}

这仅将悬停应用于第一行之后的行。

DEMO

Answer 2

您只需覆盖第一行的悬停样式。添加以下代码：

.hoverTable tr:first-child:hover {
    background: #fff;
}

在此片段之后：

/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
      background-color: #86D694;
}

以下是显示结果的完整实时代码段：

th,td {
    padding: 15px;
    text-align: center;
}

.hoverTable tr:nth-child(even) {
    background-color: #eee;
}
.hoverTable tr:nth-child(odd) {
   background-color:#fff;
}

.blankcell {
    background: none!important; 
    border: none!important;
}


/* HOVER FUNCTION */
.hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; 
        border: #000000 1px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #ffffff;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #86D694;
    }
    .hoverTable tr:first-child:hover {
        background: #fff;
    }

/* Check and X-Mark Coloring*/
#check {
    color: #1CF200;
}
#x01 {
    color: #ff6969;
}

<table style="width:100%" class="hoverTable">
  <tr>
  <td class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>
  <tr>
   <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td id="check">&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td id="x01">&#x2716</td>
    <td>&#x2716</td> 
    <td>&#x2716</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
</table>

Answer 3

.hoverTable tr:not(:nth-child(1)):hover {
      background-color: #86D694;
}

http://jsfiddle.net/ebvywkg5/

Answer 4

为悬停时要突出显示的所有表格行添加“hov”类：

<table style="width:100%" class="hoverTable">
  <tr class="nohover">
  <td class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>
  <tr class="hov">
   <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr class="hov">
  <td class="rowTitle">TITLE</td>
    <td id="check">&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr class="hov">
  <td class="rowTitle">TITLE</td>
    <td id="x01">&#x2716</td>
    <td>&#x2716</td> 
    <td>&#x2716</td>
  </tr>
  <tr class="hov">
  <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
</table>

然后更改此CSS以包含“hov”类：

.hoverTable tr.hov:hover {
      background-color: #86D694;
}

Answer 5

我的建议可以简化您的问题并使您的表格更易于访问：将第一行放在thead标记中，将其余行放在tbody标记中。然后，您可以使用tbody tr选择器定位标题中不包含的行。

如何从表格的顶行删除悬停功能

5 个答案: