CSS：在 <td> 内显示跨度，在行悬停时

Question

我需要在 a 中显示一个跨度<td>，但仅当 cointaner<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

尝试这个

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

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

希望这对你有帮助