jquery在点击时改变背景答案

【问题标题】：jquery change background on clickjquery在点击时改变背景
【发布时间】：2011-11-14 11:03:29
【问题描述】：

我的记录有一个表格列表，我使用悬停功能将背景颜色更改为蓝色。为此，一切都很好。

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

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

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

【问题讨论】：

为什么多张桌子冒充一张桌子？

标签： jquery click hover

【解决方案1】：

这是因为您在鼠标悬停在该行上并单击它时指定了两个背景。您需要指定哪个更重要。

尝试将 table_record_selected 更改为：

背景：#FFFBCC !important;

【讨论】：

【解决方案2】：

使用！重要： http://fiddle.jshell.net/KuwWs/8/

【讨论】：

【解决方案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');
    }
});

这样该行不会同时具有两种样式。

【讨论】：