Trouble with inheritance of CSS
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>
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; }
try to use
.image-result tr:hover td { background-color:#fff; }
Try this more specific one.
div.image-result table tbody tr:hover { background-color: #FFF;
color: theDefaultColor;}
Update: I've tried and it works on FF and IE8, not tested on others but should work. However, you'll have to add other styles especially "color" for the class, esle it'll take the original hover one.
Update 2: Modified based on the OP's code.
Here's the code I've used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
div.image-result table tbody tr:hover { background-color: #FFF; color: #000000;}
</style>
</head>
<body>
<div>
<table id="myTable" border="1">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</div>
<div class="image-result">
<table id="myTable2" border="1">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Your second one will be recognised as a less specific selector than the first. Try this to make it more specific:
table.image-result tbody tr:hover { background-color: #FFF; }
(put image-result class wherever it is actually applied).
加载中,请稍侯......
精彩评论