具有懸停幫助.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

回答

相關問題