Question

我需要在<td>内显示一个范围，但只有当标记<tr>悬停时才会显示。

我已经写了这个css规则，但它们似乎不起作用：

.table-hover > tbody > tr:hover > span.showOnHover {
    display:block!important;
}

.table-hover > tbody > tr > span.showOnHover {
    display: none !important;
}

请查看：https://jsfiddle.net/59ovvrvm/1/

我知道我可以用jquery做到这一点，但是只能用css做任何替代方法吗？

Answer 1

希望有所帮助

span{
  display:none
}

tr:hover > td > span{
  display:inline-block;
}

<table id="tableSample" class="table table-hover table-sindi table-sindi-select sindi-actions">
    <thead>
        <tr>
            <th>Usuario</th>
            <th>Comentario</th>            
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>Usuario 1</td>
        <td>
          Comentario 1
          <span class="showOnHover">!FOCUS</span>
        </td>
      </tr>
      <tr>
        <td>Usuario 1</td>
        <td>
          Comentario 1
          <span class="showOnHover">!FOCUS</span>
        </td>
      </tr>         
    </tbody>
</table>

Answer 2

试试这个

.table-hover > tbody > tr:hover > td > span.showOnHover {
  display:block;
}

.table-hover > tbody > tr > td >  span.showOnHover {
  display: none;
}

希望这有助于你

Answer 3

检查一下，不需要课程，

.table-hover > tbody > tr:hover span{
        display:inline-block;
    }

    .table-hover > tbody > tr span {
        display: none;
    }

<table id="tableSample" class="table table-hover table-sindi table-sindi-select sindi-actions">
    <thead>
        <tr>
            <th>Usuario</th>
            <th>Comentario</th>            
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>Usuario 1</td>
        <td>
          Comentario 1
          <span class="showOnHover">!FOCUS</span>
        </td>
      </tr>
      <tr>
        <td>Usuario 1</td>
        <td>
          Comentario 1
          <span class="showOnHover">!FOCUS</span>
        </td>
      </tr>         
    </tbody>
</table>

Answer 4

问题在于

> span.showOnHover

你带了一个儿童选择器＆＃34;＆gt;＆＃34;宣称只有祖先的直接子女才能得到这种风格。只需擦除子选择器，样式将获得表行的所有后代。

.table-hover > tbody > tr:hover span.showOnHover

和

.table-hover > tbody > tr span.showOnHover

CSS：在行内悬停时显示跨度

4 个答案: