CODEWITHSUNDEEP
htmlcsshover
Yasin Yörük
Yasin Yörük

Reputation: 1539

CSS hover disable nested table

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; }

Upvotes: 2

Views: 2499

Answers (2)

米米米
米米米

Reputation: 990

It works for me.

.table-hover tbody tr:hover td table tr td {
    background-color: revert;
}

Upvotes: 0

Tim M.
Tim M.

Reputation: 54378

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.

See also:

Upvotes: 5

Related Questions