Question

I’m trying to get a hover trigger done on the td which will change the entire background of the class “selectTemplate” change. But whats happening currently is – the {{description}} changes correctly, but the {{name}} stays the same.

I want both {{name}} & {{description}} to change when hovered over.

HTML

<table class="templateList templatepolicy-table">
        <thead>
        </thead>
        <tbody>
        {{#items}}
            <div id="TemplateItem">
                <tr>
                    <td>
                        <div id="{{sequence}}" class="selectTemplate">
                                <div class="TemplateName">
                                    {{name}}
                                </div>
                                {{description}}
                        </div>

                    </td>
                </tr>
            </div>
        {{/items}}
        </tbody>
    </table>

CSS

table.templatepolicy-table 
{
    width: 100%;
    border-width: 0px;
    border-spacing: 5px;
    border-style: none;
    border-color: black;
    border-collapse: separate;
    background-color: white;
}

table.templatepolicy-table .TemplateName  
{
    background-color: rgb(232, 232, 232); 
    color: #2779AC;
    font-weight:bolder;
}

table.templatepolicy-table td 
{
    color: #656565;
    width: 100%;
    border-width: 0px;
    padding: 5px;
    border-style: none;
    border-color: white;
    background-color: rgb(232, 232, 232);
}

table.templatepolicy-table td:hover
{ 
    color: #FFF;
    background-color: #2779AC;
}

Answer 1

Change the last selector to this:

table.templatepolicy-table td:hover,
table.templatepolicy-table td:hover .TemplateName {
    color: #FFF;
    background-color: #2779AC;
}