Mouseout and mousedown conflict

Question

I want to in table if user put mouse over each row that row colored with animate and when mouse out then row's color return to its default. but if user right click on row ,that row be red until click on context menu .

I tried this code but when user right click and want select a menu item ,red row return to default but I want to row be red until click(select):

$(function () {
$('.users').contextMenu({
    selector: 'tr',
    callback: function (key, options) {
        if (key == 'delete') {
            if (confirm(" Are you sure?")) {
                $.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });
                $(this).animate({ backgroundColor: '#FF80FF' }, 1000);
            }
        }

    },
    items: {
        "edit": { name: "edit" },
        "delete": { name: "delete" }
    }
});
$('tr').mouseover(function () {
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "#80FF00" }, 300);
});

$('tr').mouseout(function () {
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "white" }, 300);
});
$('tr').mousedown(function (event) {
    if (event.which==3) {
        $('td', this).animate
    ({ backgroundColor: "red" }, 300);
    }
});
});

Answer 1

Check that right clicked with clicked flag:

$(function () {
var clicked=false;
$('.users').contextMenu({
    selector: 'tr',
    callback: function (key, options) {
        if (key == 'delete') {
            if (confirm(" Are you sure?")) {
                $.post("../Actions/Delete.ashx", { type: "user", id: $(this).attr('id') });

                $(this).animate({ backgroundColor: '#FF80FF' }, 1000);
            }
        clicked=false;
        }

    },
    items: {
        "edit": { name: "edit" },
        "delete": { name: "delete" }
    }
});
$('tr').mouseover(function () {
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "#80FF00" }, 300);
});

$('tr').mouseout(function () {
    if(!clicked){
    $('td', this).stop(true, true).animate
    ({ backgroundColor: "white" }, 300);
}
});
$('tr').mousedown(function (event) {
    if (event.which==3) {
        clicked=true;
        $('td', this).animate
    ({ backgroundColor: "red" }, 300);
    }
});
});