jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的,用了前者,再$(this).addClass("css class name");效果显示不出来。
http://youchenglin.iteye.com/blog/685026
前他的一些内容参见下列代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>a.html</title> <style type="text/css"> div.content { width: 300px; border: 1px solid red; } .divbox{ height:300px; width:200px; background:#ffffff; border:solid 1px #ccc; float:left; margin-right:10px; } .divOver{ background:#eff8fe; border:solid 1px #d2dce3; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> jQuery (function () { $ ("div.content").click (function () { var $self = $ (this).attr ("id"); var $check = $ ("input#inputid" + $self); if (!!$check.prop ("checked")) { $check.prop ("checked", false); $ (this).css ( { "color" : "black" }); } else { $check.prop ("checked", true); $ (this).css ( { "color" : "red" }); } }); $(".color").find("tr").each(function(i){this.style.backgroundColor=[‘#fff‘,‘#eee‘][i%2]});//一行为白色,一行为灰色 $(".color").find("tr").mouseover(function(){ $(this).css("backgroundColor","#6699CC"); }); $(".color").find("tr").mouseout(function(){ $("tr:even").css("backgroundColor","#fff"); //偶数行的颜色 $("tr:odd").css("backgroundColor","#eee"); //奇数行的颜色 }); //当鼠标滑入时将div的class换成divOver $(‘.divbox‘).hover(function(){ $(this).addClass(‘divOver‘); },function(){ //鼠标离开时移除divOver样式 $(this).removeClass(‘divOver‘); } ); }); </script> </head> <body> <center> <input id="inputid1" type="checkbox" />aa<div class="content" id="1">1111</div> <div id="results">11</div> <div id="results2">23</div> <table width="200" border="0" cellspacing="1" bgcolor="#eeeeee" class="color"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <br/><hr/><br/> </center> <div id="menu"> <div class="divbox">区块A</div> <div class="divbox">区块B</div> <div class="divbox">区块C</div> </div> </body> </html>