下面的HTML和css能够实现div的隔行变色:
1 2
如果要实现效果：鼠标移到某一行上，改变背景和文字颜色；鼠标移除，还原以前的背景和文字颜色。
JQuery代码可以实现这个效果：
$("#container div").hover(function(){ // 鼠标经过时,改变背景色和文字颜色 $(this).css("backgroundColor","#346ba3"); $(this).css("color","rgb(255,255,255)"); },function(){ // 鼠标移除,还原背景色和文字颜色 $(this).css("backgroundColor",""); $(this).css("color","");});
可以看到使用JQuery非常的简单：
1、提供了hover()这个API，接收2个函数，对应mouseover和mouseout。
2、将背景和文字颜色置空，即可还原元素在mouseover之前的颜色，非常棒。
3、支持rgb格式和十六进制格式的颜色值，免去了我们需要做颜色转换的麻烦。
所以这篇博客中提到的RGB转HEX格式，没有什么实际的用处，不过这个算法写的还是很好的，在此记录下：
function rgb2hex(rgb){ function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);}