CODEWITHSUNDEEP
htmlcsshover
robbyintoronto
robbyintoronto

Reputation: 3

CSS hover - How do I get it to change two nested divs

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;
}

Upvotes: 0

Views: 1322

Answers (3)

Subhajit
Subhajit

Reputation: 1987

I would like to inform you that if you use, td:hover it would not work on lower versons of IE.

Now regarding your css not working, let me explain the reason to you. Your main issue is while hovering over the <td> the entire background color of class="selectTemplate" or the td is not changing. Actually its changing but as you have defined a background color of <div class="TemplateName"> with this table.templatepolicy-table .TemplateName { background-color: rgb(232, 232, 232); }, its overlapping the changed background color.

Hence to get this sort out you have to change the background color of <div class="TemplateName"> too with the hover. As previous answers says the code would be :-

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

Hope this clarifies your queries.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71908

That's because .TemplateName has a background-color set, so that rule being obeyed. You have to override that:

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Change the last selector to this:

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

Upvotes: 2

Related Questions