Html 如何从表的顶行删除悬停函数_Html_Css

Html 如何从表的顶行删除悬停函数

html css

Html 如何从表的顶行删除悬停函数,html,css,Html,Css,我在试图删除我从表的顶行创建的悬停函数时遇到问题我正在尝试创建一个表，可以用来比较不同的产品。我想对整个表使用一个悬停函数，但不包括最上面的一行（稍后我将在其中放置图像）。如何仅删除顶行的悬停这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Compare Table</title> <

我在试图删除我从表的顶行创建的悬停函数时遇到问题

我正在尝试创建一个表，可以用来比较不同的产品。我想对整个表使用一个悬停函数，但不包括最上面的一行（稍后我将在其中放置图像）。如何仅删除顶行的悬停

这是我的代码：

<!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>

谢谢你抽出时间！：）

我的建议可以简化您的问题并使您的表格更容易访问：将第一行放在

thead

标记中，其余行放在

tbody

标记中。然后，您可以使用

tbody tr

选择器以不在标题中的行为目标。

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

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

在此片段之后：

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

下面是一个完整的实时片段，显示了结果：

th，td{
填充：15px；
文本对齐：居中；
}
.hoverTable tr:n个子级（偶数）{
背景色：#eee；
}
.hoverTable tr:n个子项（奇数）{
背景色：#fff；
}
.空白电池{
背景：无！重要；
边界：没有！重要；
}
/*悬停函数*/
.气垫床{
宽度：100%；
边界塌陷：塌陷；
}
.hoverTable td{
填充：7px；
边框：#000000 1px实心；
}
/*定义所有表行的默认颜色*/
.气垫床{
背景：#ffffff；
}
/*定义表格行的悬停高亮显示颜色*/
.hoverTable tr：悬停{
背景色：#86D694；
}
.hoverTable tr:第一个子项：悬停{
背景：#fff；
}
/*检查和X标记着色*/
#检查{
颜色：#1CF200；
}
#x01{
颜色：#ff6969；
}


形象
形象
形象
标题
✔
✔
✔
标题
✔
✔
✔
标题
✖
✖
✖
标题
✔
✔
✔

试试这个：

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

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

将“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>

我非常喜欢这个解决方案。但是请注意，根据您的要求，IE 8对CSS3选择器（如

：nth child

）有限制。我知道在这一点上，这是一个旧的浏览器，但它仍然值得考虑。不管怎样，+1

<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>

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

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