Question

I have a css for hovering over tables to highlight the current row.

.cb_table-hover tbody tr:hover td,
.cb_table-hover tbody tr:hover th {
  background-color: #cfcfcf;

}

Additionally I could like to add another line to the same CSS to show a twitter bootstrap icon within the background of the hovered table row.

<i class="icon-search"></i>

At first I was thinking to utilise a background-image:url('??'); but the icon can’t be defined like that.

Any idea if that possible? Thanks

Answer 1

Sure ! You cann’t set background image with a image sprite

But you can put the icon inside td/th tag and use “display” to show/hide the icon:

.cb_table-hover tbody tr td .icon-search,
.cb_table-hover tbody tr th .icon-search{
    display: none;
}

.cb_table-hover tbody tr td:hover .icon-search,
.cb_table-hover tbody tr th:hover .icon-search{
    display: inline-block;
}