Highlight child component inside table row

Question

I have a simple html code below along with few line css to highlight table row

HTML

    <table style="empty-cells:hide;" border="1"   cellpadding="1" cellspacing="1">

    <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
    </tr>

    <tr>
        <td class="center">
            <input type="checkbox" name="query_myTextEditBox">    
        </td>

        <td>
            myTextEditBox
        </td>

        <td>
            <select size ="1" name="myTextEditBox_compare_operator">
                <option value="=">equals</option>
                <option value="<>">does not equal</option>
            </select>
        </td>

        <td>
            <input type="text" name="myTextEditBox_compare_value">
        </td>

        <td  class="center">
            <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>

    </tr>

</table>

CSS

.

center {
    text-align: center;
    vertical-align: middle;
}
td, th {
    padding: 5px;   
}
tr {
    height: 25px;   
}
tr:hover{
   background-color: yellow;
}

the hover property does highlight table row but it excludes child component like input and checkbox.How can I highlight those components when row is hovered

score 0 · Accepted Answer · answered Oct 03 '15 at 14:46

0

Try this in addition to what you have...

tr:hover input{
   background-color: yellow;
}

answered Oct 03 '15 at 14:46

www139

4,960
3
31
56

It depends on your browser if the checkbox will also get a yellow background. It does not for me in Chrome. See [here](http://stackoverflow.com/a/13375900/5358807) for further explanation. – wintvelt Oct 03 '15 at 14:51

Highlight child component inside table row

1 Answers1