JQuery изменить фон по нажатию

Question

У меня есть список таблиц для моих записей, и я использую функцию наведения, чтобы изменить цвет фона на синий.Для этого все работает нормально.

Нет, я добавил функцию щелчка для изменения цвета фона на желтый, но по какой-то причине фон становится синим (тот же цвет для функции наведения).

Iсделал демо для лучшего примера, который вы можете найти здесь .

Я надеюсь, что кто-то может мне помочь, заранее спасибо!

Answer 1

Это потому, что у вас есть два заданных фона, когда мышь наводит курсор на строку и нажимает на нее Вам нужно указать, какой из них более важный .

Попробуйте изменить table_record_selected на это:

фон: #FFFBCC! Важный;

Answer 2

использовать! Важно: http://fiddle.jshell.net/KuwWs/8/

Answer 3

Вы также можете использовать класс для зависания, чтобы вы могли переключать его так же, как вы переключаете класс при щелчке строки.

В коде CSS:

.table_record_hover
{
    background-color: #EBF3F6;  
}

В коде JS:

$('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');
    }
});

Таким образом, строка не имеет двух стилей одновременно.