使用jquery hover事件實作表格的隔行換色功能範例_jquery

jQuery hover事件

hover(over,out)一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自訂的方法，它為頻繁使用的任務提供了一種「保持在其中」的狀態。
當滑鼠移到一個符合的元素上面時，會觸發指定的第一個函數。當滑鼠移出這個元素時，會觸發指定的第二個函數。而且，會伴隨著對滑鼠是否仍處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續保持「懸停」狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

參數：
over (Function) : 滑鼠移到元素上要觸發的函數
out (Function): 滑鼠移出元素要觸發的函數

範例：
滑鼠懸停的表格加上特定的類別

jQuery 代碼：

複製程式碼 程式碼如下:

$(".table_list tr").hover(
function () {
$(this(this(this ).addClass("hover");
},
function () {
$(this).removeClass("hover");
}

);
);

這裡自己注意幾點：


1,.hover是個類，想要什麼效果自己寫。

2,別忘記引入jquery.js文件，要不然不起作用還報錯。

3,相較於傳統的css，像是this.bgColor='red'這樣的方式，簡單很多了，不需要再一行行添加了。

4,當然可以實現奇偶行效果不同，讀者自​​己去研究吧。

今日發現一個更為簡單的辦法，就是使用jquery的each方法，這個只需要一行程式碼既可以實現隔行換色效果。只不過不會隨著滑鼠的移動而改變罷了。

複製程式碼

程式碼如下:

$(".tablist tr"). (i){this.style.backgroundColor=['#ccc','#fff'][i%2]});