Question

I have some problem with my CSS Style. Currently, i have something like this:

table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}

After this, i found out that i need to have some table somewhere without the hover. So i go ahead and use this to overide:

.image-result  tr:hover { background-color: #FFF; }

but unfortunately, this do nothing on the TR.

Can you suggest what should i do?

---

        <div id="image-box">
            <div>
                <span>Search Image: </span>
                <%= Html.TextBox("img-search") %>
                <%= Html.Hidden("img-submitto", Url.Action("photopicker", "ajax"))%>
                <button id="img-submit">Search</button>
            </div>
            <div class="image-result">
 <table>
     <tbody><tr>
            <td>c</td>
            <td>c</td>
           </tr>
    </tbody>
</table>
                </div>
            </div>

Answer 1

Basically the more specific the selector is, the higher the priority the browser will give in applying the rules for that style. Your first rule is more specific so has higher priority, which is why the style isn’t being applied. You can do this:

.image-result  tr:hover { background-color: #FFF !important; }

to increase the priority. That’s not generally the recommended approach as it can (with some justification) be seen as hacking around the real problem. Probably a better solution is to make the new rule at least as specific as the other one:

table.image-result tbody tr:hover { background: #FFF; }