点击jquery更改背景

Question

我有我的记录表的列表，我使用悬停功能将backgroundcolor更改为蓝色。为此，每一个工作都很好。

不，我添加了一个点击功能，将背景颜色更改为黄色，但由于某些原因，背景变成了蓝色（悬停功能的颜色相同）。

我做了一个更好的例子，你可以找到here演示。

我希望有人能帮助我，在此先感谢！

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

这样行不具有在同一时间的两种风格。