Html CSS hover-如何让它更改两个嵌套的div

我试图在td上完成一个悬停触发器，它将改变类“selectTemplate”更改的整个背景。但是现在发生的是，

{{description}}

正确更改，但是

{{name}}

保持不变

当鼠标悬停在上方时，我希望

{{name}}

和

{{{description}}}

都改变

HTML

---

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

table.templatepolicy-table td:hover，
table.templatepolicy-table td:hover.TemplateName{
颜色：#FFF；
背景色：#2779AC；
}

这是因为

.TemplateName

设置了

背景色，因此遵守规则。您必须覆盖以下内容：

table.templatepolicy-table td:hover，
table.templatepolicy-table td:hover.TemplateName{
颜色：#FFF；
背景色：#2779AC；
}
我想通知您，如果您使用td:hover，它将无法在IE的较低版本上工作

现在，关于你的css不工作，让我向你解释原因。您的主要问题是，当您将鼠标悬停在
上时，
class=“selectTemplate”或td的整个背景色没有改变。实际上，它正在改变，但正如您使用此
表定义了
的背景色。templatepolicy-table.TemplateName{background color:rgb（232，232，232）；}
，它与改变的背景色重叠

因此，要获得这种排序，您必须使用鼠标悬停来更改
的背景色。正如前面的回答所说，代码是：-

table.templatepolicy-table td:hover，
table.templatepolicy-table td:hover.TemplateName{
颜色：#FFF；
背景色：#2779AC；
}

希望这能澄清您的疑问。
这将同时改变这两个选项，或者您在哪一个位置居住？@gabeDel:当您将鼠标悬停在
td
上时，它将同时改变
td
及其
div
。非常感谢！非常感谢！好的，这基本上和Kolink的答案一样，但既然我已经写了。。。
<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>