html - CSS hover disable nested table -
i have problem css :hover
class. how disable second table :hover
class inside second row.
here fiddle
html
<table border="0" width="100%" id="product-table"> <tr> <td colspan="2">title of table</td> </tr> <tr> <td width="20%"><b>text text</b></td> <td>someting product</td> </tr> <tr> <td><b>text text</b></td> <td> <table border="0" width="100%"> <thead> <tr bgcolor="#ddd"> <td colspan="6"><strong>title of inside</strong></td> </tr> <tr bgcolor="#efefef"> <td width="20%"><strong>no</strong></td> <td width="20%"><strong>date</strong></td> <td width="20%"><strong>define</strong></td> </tr> </thead> <tbody id="hat_ekle"> <tr> <td>123</td> <td>2013</td> <td>some text</td> </tr> <tr> <td>234</td> <td>2013</td> <td>some text</td> </tr> </tbody> </table> </td> </tr> </table>
css
#product-table tr:hover { background:#333; }
one method make selector more restrictive:
#product-table > tbody > tr:hover { background:#333; }
demo: http://jsfiddle.net/yrz8r/2/
>
indicates direct child should matched.
see also:
Comments
Post a Comment