CODEWITHSUNDEEP
css
k102
k102

Reputation: 8089

how to use background-image and hover

I've got the following:

table.inactiveTable thead {
    background: #efe;
    background: -moz-linear-gradient(top,#efe,#ded);
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#efe),to(#ded));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#efe,endColorstr=#ded);
    height: 40px;
}

table.inactiveTable th:hover {
    background: -moz-linear-gradient(top,#efe,#F8FFB5);
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#efe),to(#F8FFB5));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#efe,endColorstr=#F8FFB5);
    cursor : pointer;
}

then, in runtime i add asc class for that element, the style is the follows:

.asc, .asc:hover{
    background-image: url(arrow_up.png);
    background-repeat: no-repeat;
    background-position : left;
}

It works - i mean there's the correct image in the background. But it disappeads on hover event - th:hover works.

I mean: this is what i see when i add asc class:

enter image description here

and this is what i get when i hober over this element:

enter image description here

How can i make them work together - i mean to make inage stay while changing the gradient colours?

My goal is to be able to add a background image for the specific (table column header) element on click event, but not to loose this image on hover.

added:

html:

<table id='leads' class='inactiveTable'>
    <thead>
        <tr>
            <th rowspan='2' onclick="sorter.sort(this, 'unumber')">id</th>
            <th rowspan='2' onclick="sorter.sort(this, 'bccu')">bccu</th>
...

Upvotes: 0

Views: 307

Answers (1)

Dipak
Dipak

Reputation: 12190

Add-

.inactiveTable th.asc, .inactiveTable th.asc:hover{
    background: url(arrow_up.png) no-repeat left top;
}

It will work

Upvotes: 1

Related Questions