0

我正在尝试在 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;
}
4

3 回答 3

2

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

table.templatepolicy-table td:hover,
table.templatepolicy-table td:hover .TemplateName {
    color: #FFF;
    background-color: #2779AC;
}
于 2012-06-20T18:51:12.123 回答
0

我想通知您，如果您使用 td:hover，它将无法在较低版本的 IE 上运行。

现在关于你的css不起作用，让我向你解释原因。您的主要问题是悬停在<td>整个背景颜色上时class="selectTemplate" or the td没有改变。实际上它在变化，但是当您<div class="TemplateName">使用 this定义背景颜色时table.templatepolicy-table .TemplateName { background-color: rgb(232, 232, 232); }，它与更改的背景颜色重叠。

<div class="TemplateName">因此，要解决这个问题，您必须通过悬停更改背景颜色。正如之前的答案所说，代码将是： -

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

希望这能澄清您的疑问。

于 2012-06-20T19:01:12.497 回答
0

那是因为.TemplateName有一套background-color，所以这条规则被遵守了。你必须覆盖它：

table.templatepolicy-table td:hover,
table.templatepolicy-table td:hover .TemplateName {
   color: #FFF;
   background-color: #2779AC;
}
于 2012-06-20T18:52:49.313 回答