CSS: Show span inside <td>, on row hover

I need to show a span inside a <td>, but only when the cointaner <tr> is hovered.

I have wrote this css rules, but they don't seem to work:

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

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

Take a look to: https://jsfiddle.net/59ovvrvm/1/

I know I can do this with jquery, but any alternatives to do it only with css?

CSS: Show span inside <td>, on row hover

4 Answers