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

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -