Question

如果鼠标悬停在表格行上，我想更改（动画）表格行的颜色。你能帮帮我吗？感谢。

td{width:200px;text-align:center; background-color:gray;}


$('tr').mouseover(function() {
    $(this).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $(this).animate
        ({ backgroundColor: "gray" }, 1000);
});

http://jsfiddle.net/NXejr/10/

Answer 1

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});

http://jsfiddle.net/MtF6E/

表行不响应背景颜色，因此您可以更改内部td的背景。由于某种原因，它根本不喜欢“灰色”。以为这实际上是一个有效的CSS颜色名称，但显然不是。我使用“＃666”代替，它工作正常。我还介绍了stop(true, true)。这将停止元素上的任何正在进行的动画，因此当前的动画可以继续。它可以使外观和响应更加平滑。

Answer 2

$("table tr ").hover(
    function(){
        $(this).animate
        ({ backgroundColor: "Red" }, 1000);
    },
    function(){
        $(this).stop(true,true).animate
        ({ backgroundColor: "White" }, 1000);
    }
);

使用.stop(true,true)来阻止鼠标频繁悬停时发生动画

http://jsfiddle.net/NXejr/13/

Answer 3

$('tr td').mouseover(function(){
    $(this).css('background-color','#f00');
}).mouseout(function(){
    $(this).css('background-color','#444');
});

http://jsfiddle.net/Jp4AP/

Answer 4

尝试使用hover而不是mouseover和mouseout：

$('tr').hover(function() {
    $(this).animate({ "background-color" : "red" }, 1000);
},
function () {
    $(this).animate({ "background-color" : "gray" }, 1000);
});

Answer 5

你有两个问题：

您正在为tr的颜色设置动画，但这会被td样式覆盖。

更改为

$('tr').mouseover(function() {
    $(this).find('td').animate
        ({ backgroundColor: "red" }, 1000);
});

将mouseover工作。

由于某些原因，jQuery不喜欢gray函数中的mouseout。不知道为什么会这样，但是如果你改成例如

它会起作用

$('tr').mouseout(function() {
    $(this).find('td').animate
        ({ backgroundColor: "#aaa" }, 1000);
});

我也更喜欢使用其他几个建议的hover解决方案，但他们没有解决这些问题

使用jquery动画突出显示表行

5 个答案: