Question

我有记录的表格列表，我使用悬停功能将backgroundcolor更改为蓝色。为此，每件事都很好。

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

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

我希望有人可以帮助我，提前谢谢！

Answer 1

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

尝试将table_record_selected更改为：

背景：#FFFBCC！important;

Answer 2

使用！important： 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');
    }
});

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

点击时jquery更改背景

3 个答案: