CODEWITHSUNDEEP
jqueryclickhover
Leon van der Veen
Leon van der Veen

Reputation: 1672

jquery change background on click

I have a table list for my records and I use a hover function to change the backgroundcolor to blue. For that everyting works fine.

No i added a click function for changing the backgroundcolor to yellow but for some reason the background turns into blue (the same color for the hover function).

I made a demo for a better example which you can find here.

I hope someone can help me, thanks in advance!

Upvotes: 0

Views: 336

Answers (3)

Felix L
Felix L

Reputation: 246

You could also use a class for the hovering so you can toggle it the same way you toggle the class when the row is clicked.

In the CSS code :

.table_record_hover
{
    background-color: #EBF3F6;  
}

In the JS code :

$('table.table_record_even').click(function()
{
    $(this).toggleClass('table_record_hover');
    $(this).toggleClass('table_record_selected');
});

$('table.table_record').click(function()
{
    $(this).toggleClass('table_record_hover');
    $(this).toggleClass('table_record_selected');
});



$('table.table_record').hover(function()
{
    if($(this).hasClass('table_record_selected'))
    {
    }
    else
    {
         $(this).toggleClass('table_record_hover');
    }
},

function()
{
    if($(this).hasClass('table_record_selected'))
    {
    }
    else
    {
        $(this).toggleClass('table_record_hover');
    }
});

$('table.table_record_even').hover(function()
{
    if($(this).hasClass('table_record_selected'))
    {
    }
    else
    {
        $(this).toggleClass('table_record_hover');
    }
},

function()
{
    if($(this).hasClass('table_record_selected'))
    {
    }
    else
    {
        $(this).toggleClass('table_record_hover');
    }
});

This way the row does not have the two styles at the same time.

Upvotes: 0

korywka
korywka

Reputation: 7653

use !important: http://fiddle.jshell.net/KuwWs/8/

Upvotes: 1

w00
w00

Reputation: 26772

This is because you have two backgrounds specified at the time your mouse is hovering over the row and clicking on it. You need to specify which one is more important.

Try to change table_record_selected to this:

background:#FFFBCC !important;

Upvotes: 5

Related Questions