只悬停表格的一个单元格答案

【问题标题】：Hovering just one cell of a table只悬停表格的一个单元格
【发布时间】：2017-03-13 18:02:06
【问题描述】：

如何只悬停表格的一个单元格？我不想悬停所有行。这是我的表格 HTML：

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th class="danger" colspan="4">Comprobante de Pago</th> 
        </tr>
    </thead>
        <tr>
            <td class="warning" width="10%">Fecha:</td>
            <td colspan="2" id="vertical_align">sdf</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="1" class="asd">Client</td>
            <td colspan="1">NAME</td>
            <td colspan="1">NAME 2</td> 
        </tr>
        <tr>
            <td colspan="2">asd</td>    
        </tr>
        <tr class="info">
            <td colspan="3">asd</td>
        </tr>

注意：我使用 Bootstrap 进行悬停。（我不介意不使用 Bootstrap 是否可以解决问题。）

【问题讨论】：

您是否尝试过向<td class="myclass"> 添加一个类，然后在CSS 中使用.myclass:hover？

标签： html css twitter-bootstrap hover

【解决方案1】：

试试这个

table td:hover{
    background-color: magenta;
}

然后删除类table-hover这里<table class="table table-hover table-bordered">

【讨论】：

【解决方案2】：

将格式应用于 TD 元素。

.table td:hover{
    background-color: green;
}

【讨论】：

【解决方案3】：

您需要使用选择器strong enough : see specifity 覆盖引导规则。

好像是tr:hover先在这里重置：

.table.table-hover.table-bordered tr:hover {/* selector strong enough to overwrite bootsrap rule */
  background:none;/* remove bg */
}

然后将您需要的规则应用到您的 tds，使用此处使用的任何属性（类、id、colspan、rowspan、...）

.table.table-hover.table-bordered tr:hover {
  background: none;
}
td:hover {
  background: lightgray;
}
/* a few selector examples */
td[colspan]:hover {
  background: lime;
}
td[colspan] + td[colspan]:hover {
  background:turquoise;
}
td[colspan="2"]:hover {
  background: gold;
}
td[rowspan]:hover {
  background: tomato;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th class="danger" colspan="3">Comprobante de Pago</th>
    </tr>
  </thead>
  <tr>
    <td class="warning" width="10%">Fecha:</td>
    <td colspan="2" id="vertical_align">sdf</td>
  </tr>
  <tr>
    <td rowspan="3" class="asd">Client</td>
    <td colspan="1">NAME</td>
    <td colspan="1">NAME 2</td>
  </tr>
  <tr>
    <td colspan="2">asd</td>
  </tr>
  <tr class="info">
    <td colspan="2">asd</td>
  </tr>
</table>

注意：我更新了rowspan 和colspan 值的表格代码（colspan="1" 甚至不需要设置，它是默认值）

【讨论】：

非常感谢，我也想知道如何为单元格“Fecha:”和单元格“Client”设置不同的宽度尺寸，正如你所注意到的，我已经设置了 10% 的宽度对于单元格“Fecha”，但如果我想将 30% 设置为单元格“Client”，则不允许。
哦，所以不可能有 2 个不同宽度的单元格？
@JoanPerezLozano 你需要欺骗它，就像它是建立在更多的列上才能打破它一样。 codepen.io/anon/pen/PGMqWZ 其实.asd和.warning属于同一列，它们的宽度无论如何都是一样的` :(

【解决方案4】：

这应该可以解决问题...

table tr td:hover{
  background-color:red;
  }

<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th class="danger" colspan="4">Comprobante de Pago</th> 
            </tr>
        </thead>
            <tr>
                <td class="warning" width="10%">Fecha:</td>
                <td colspan="2" id="vertical_align">sdf</td>
            </tr>
            <tr>
                <td rowspan="3" colspan="1" class="asd">Client</td>
                <td colspan="1">NAME</td>
                <td colspan="1">NAME 2</td> 
            </tr>
            <tr>
                <td colspan="2">asd</td>

            </tr>
            <tr class="info">
                <td colspan="3">asd</td>
            </tr>

</table>

【讨论】：

【解决方案5】：

你可以使用重要的。

.table td:hover{
    background-color: red !important;
}

【讨论】：

这不适用于所有表格单元格吗？ OP 询问如何悬停“只有一个”
我认为你可以使用一个类或一个id：
.table .asd:hover{ background-color: red !important; }