下面这组代码是点击DIV后div颜色改变 或者鼠标放上颜色改变的Jquer语句。
<style type="text/css"> 制作DIV样式 .a1 { position: absolute; 141px; height: 240px; z-index: 1; left: 6px; top: 33px; border:1px solid #0FF; } .a2 { position: absolute; 141px; height: 60px; z-index: 1; left: 0px; top: 0px; background-color:#F0F; border:1px solid #0FF; } .a3 { position: absolute; 141px; height: 60px; z-index: 1; left: 0px; top: 60px; background-color:#F0F; border:1px solid #0FF; } .a4 { position: absolute; 141px; height: 60px; z-index: 1; left: 0px; top: 120px; background-color:#F0F; border:1px solid #0FF; } .a5 { position: absolute; 141px; height: 60px; z-index: 1; left: 0px; top: 180px; background-color:#F0F; border:1px solid #0FF; } </style> </head> <body> 链接数据库 <?php $db = new MySQLi("localhost","root","123","student"); $sql = "select * from firend"; $result = $db->query($sql); $attr = $result->fetch_row(); echo "<select name='name' id='id'> <option>$attr[1]</option> </select>"; ?> 放入5个DIV <div class="a1"> <div class="a2" align="center">张三</div> <div class="a3" align="center">李四</div> <div class="a4" align="center">王五</div> <div class="a5" align="center">赵六</div> </div> </body> JS代码： <script type="text/javascript"> $(document).ready(function(e) { $(".a2").mouseover(function(){ $(this).css("background-color","red") 写入的是鼠标放上后颜色变成红色 }) $(".a3").mouseover(function(){ $(this).css("background-color","red") }) $(".a4").mouseover(function(){ $(this).css("background-color","red") }) $(".a5").mouseover(function(){ $(this).css("background-color","red") }) $(".a2").mouseout(function(){ if($(this).attr("xz")!=1) { $(this).css("background-color","#F0F") 写入的是一个效果 如果xz为1的话，变成F0F颜色 } }) $(".a3").mouseout(function(){ if($(this).attr("xz")!=1) { $(this).css("background-color","#F0F") } }) $(".a4").mouseout(function(){ if($(this).attr("xz")!=1) { $(this).css("background-color","#F0F") } }) $(".a5").mouseout(function(){ if($(this).attr("xz")!=1) { $(this).css("background-color","#F0F") } $(".a2").click(function(){ $(".a2").css("background-color","#F0F"); 写入的是鼠标点击之后，加了一个属性为xz， 鼠标点击xz为1，鼠标不点击xz为0 . 点击鼠标后颜色变成红色 $(".a2").attr("xz",0); $(this).css("background-color","red"); $(this).attr("xz",1) }) $(".a3").click(function(){ $(".a3").css("background-color","#F0F"); $(".a3").attr("xz",0); $(this).css("background-color","red"); $(this).attr("xz",1) }) $(".a4").click(function(){ $(".a4").css("background-color","#F0F"); $(".a4").attr("xz",0); $(this).css("background-color","red"); $(this).attr("xz",1) }) $(".a5").click(function(){ $(".a5").css("background-color","#F0F"); $(".a5").attr("xz",0); $(this).css("background-color","red"); $(this).attr("xz",1) }) }) }); </script>