CSS hover disable nested table

Question

I have a problem with CSS :hover class. How do I disable second table :hover class which is inside the second row.

Here is the fiddle

HTML

<table border="0" width="100%" id="product-table">
  <tr>
    <td colspan="2">Title of the table</td>
  </tr>
  <tr>
    <td width="20%"><b>Text text</b></td>
    <td>someting about 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; }

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

One method is to make the selector more restrictive:

#product-table > tbody > tr:hover { background:#333; }

Demo: http://jsfiddle.net/yrZ8R/2/

> indicates that only the direct child should be matched.

CSS hover disable nested table

2 Answers2