Highlight cell only when hovering

Question

I have the following table:

<table class="table table66 table-bordered">
<thead>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Alan</td>
        <td>11</td>
    </tr>
</tbody>

I want to highlight the cell I'm hovering, not the entire row. I've tried this with no success:

td.table66:hover {
            background-color: #C0C0C0;
}

Answer 1

Try

.table66 td:hover {
    background-color: #C0C0C0;
}

What you are doing in your sample is trying to select a td which also has the class table66, when it is your table which has the class.

Answer 2

Try this.

.table66 td:hover {
    background-color: #C0C0C0;
}