I'm working on a web app using Twitter Bootstrap. In one of our views, there is a table that uses the `.table-hover` class. There are some specific cells in the table that I don't want to highlight when the rest of their rows highlight, though. What style rules should I use to achieve this effect?

This is roughly how my view table is organized:

```
<table class="table table-hover">
    <thead>
        <tr>
            <th />
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Row Group "Heading" 1</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td rowspan="2">Row Group "Heading" 2</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

```

I want to make the cells that span 2 rows not highlight when they are hovered over.

EDIT:

I tried this CSS:

```
td.rowTitle:hover { background-color: transparent; }

```

It doesn't work, unfortunately. I think it may be because the whole row is being highlighted, not just the cell...