Question

如何只悬停一个桌子的一个单元格？我不想徘徊所有的行。这是我的表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的情况下解决问题。）

Answer 1

将格式应用于TD元素。

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

Answer 2

试试这个

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

然后在此处table-hover

删除课程<table class="table table-hover table-bordered">

Answer 3

应该这样做......

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>

Answer 4

你可以使用重要的。

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

Answer 5

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

似乎首先要重置tr:hover：

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

注意：我更新了关于rowspan和colspan值的表格代码（colspan="1"甚至没有设置，它是defaut值）

只悬停在桌子的一个单元格中

5 个答案: