具有悬停帮助.live

我有一个表，我创建的飞行行：具有悬停帮助.live

$('#AjaxResultTable > tbody:last').append('<tr class="row"><td class="expandResult" title="Click to expand/collapse">&#43;</td>' + id + name + suburb + state + zip + '</tr>').hide().fadeIn(200);

我想改变行的背景颜色，当我将鼠标悬停在他们改变回来时，我不是。

我试着用

$('#AjaxResultTable tr').hover(function() { 
    $(this).css('background-color', '#f5f5f5'); 
}, function() { 
    $(this).css('background-color', '#fff'); 
});

，但没有工作，所以我试图用

$('#AjaxResultTable tr').live('hover', function() { 
    $(this).css('background-color', '#f5f5f5'); 
}, function() { 
    $(this).css('background-color', '#fff'); 
});

当我将鼠标悬停在一排它改变背景颜色，但它不会更改回当我不是白色的时候变成白色。

有什么建议吗？

在此先感谢。

来源

2011-05-31 Roger

我会做一个简单的事件处理程序来切换一个类。

$('#AjaxResultTable').delegate('tr', 'mouseenter mouseleave', function() { 
    $(this).toggleClass('hover'); 
});

CSS

.hover { 
    background-color: #F5F5F5; 
}

编辑：另外在你的榜样，物业应该被称为backgroundColor（而不是background-color）

编辑2：。 live（）有一些注意事项，其中一个与之绑定.hover（）。请参阅API文档here。

As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

希望这有助于！

来源

2011-05-31 12:44:55

非常感谢 – Roger 2011-05-31 12:58:37

可以使用.mouseleave()听众..看看这里：http://api.jquery.com/mouseleave/

来源

2011-05-31 12:45:24 Cata

您需要的背景颜色适用于TD/TH不是TR。基于类的系统在这种情况下更可取

$('#AjaxResultTable tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}); 

tr.hover td, tr.hover th { background-color: #f5f5f5; }

来源

2011-05-31 12:46:19 devmatt

我建议用严格的css来做。如果你的页面上有很多事情发生，特别是现场处理程序，你会发现一些性能下降。

一个像这样的CSS选择器：将会改变被悬停的行中所有td的背景颜色。

#YourTableId tbody tr:hover td 
{ 
    background-color:#F0F6Fc; 
}

来源

2011-05-31 12:47:31 Patricia

是的，我也做在CSS来改变呈现的风格.. 一些东西的生活是已经投入aboce

#yourTableID tbody td:hover tr 
{ 
    backgroundColor:#F0F6Fc; 
    color: #FFF; 
} 

or .yourTableClass tr:hover 
{ 
    backgroundColor:#F0F6Fc; 
    color: #FFF; 
}

也是我认为这是在这里，但如果你正在使用IE浏览器。 ..7-无论我会推荐使用 whatever:hover文件

来源

2011-07-27 20:17:13 user5820

具有悬停帮助.live

回答

相关问题