Question

I am using a logic to highlight cells based on if the cursor is hovering over the row:

function setupTable(tbl) {
    if ($(tbl).find('tbody').size() > 0) {
        $(tbl).find('tbody tr').hover(function () {
            $(this).find('td:gt(0)').addClass('highlight');
        }, function () {
            $(this).find('td:gt(0)').removeClass('highlight');
        }).click(window.onTrClick);

        if ($(tbl).find('tbody tr').size() > 10) {
            setUpPagination(tbl);
        }
    }
}

The style rule is define like the follows:

.gridview .data
{
    background-color: White;
    padding-left: 3px;
    padding-right: 3px;
}

.highlight
{
    background-color: #3169C6;
    color: White;
    cursor: pointer;
}

But on hovering the text goes white. The net effect is as if that row of data is blanked out. I open IE’s developer toolbar. And try to play around.

I try to manipulate the class attribute and find out that

class="data highlight"

does not give the desired effect. But if I did

class="highlight"

it sort of works…

I am trying to understand why this is so? How will the rules be applied if we do

class="data highlight"?

---

UPDATE:

I want the padding of .data to be sort-of “inherited” (or maintained) to .highlight. What do I do then?

Answer 1

.gridview .data has higher specificity than .highlight.

The result is that background-color: White (from .gridview .data, instead of background-color: #3169C6 from .highlight) and color: White (from .highlight) is applied, making it appear to be “blanked out”.

To fix it, you should change .highlight to .gridview .highlight.

This fix will work because .gridview .data and .gridview .highlight will then have equal specificity, so it will then come down to which was defined last. That’s .gridview .highlight, so the declarations in there will override those in .gridview .data.

If you also use the .highlight class in other places, then instead change it to .highlight, .gridview .highlight.