html - CSS hover - 如何让它改变两个嵌套的 div

Question

我正在尝试在 td 上完成悬停触发器，这将更改类“selectTemplate”更改的整个背景。但目前发生的情况是 - {{description}} 正确更改，但 {{name}} 保持不变。

我希望 {{name}} 和 {{description}} 在悬停时发生变化。

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

将最后一个选择器更改为:

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