0

クラス「selectTemplate」の変更の背景全体を変更するホバートリガーをtdで実行しようとしています。しかし、現在起こっていることは-{{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

それ.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 に答える
0

td：hoverを使用すると、IEの下位バージョンでは機能しないことをお知らせします。

さて、あなたのcssが機能していないことについて、その理由を説明しましょう。あなたの主な問題は、<td>の背景色全体にカーソルを合わせてclass="selectTemplate" or the tdも変化しないことです。実際には変化しますが、<div class="TemplateName">これ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 に答える