帮忙看看到底哪里出错了...._html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 12:22:531139瀏覽
做了一个小练习，想要每次鼠标滑过菜单项时，菜单项的背景色改变一下。为什么没变化呢....代码如下：
nbsp;html PUBtdC "-//W3C//Dtd XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<script> <br /> </script>
<script> <br /> $(document).ready(function(){ <br /> function hbtn(btn) <br /> { <br /> $("#" + btn).css("background-color", "green"); <br /> } <br /> function lbtn(btn) <br /> { <br /> $("#" + btn).css("background-color", "red"); <br /> } <br /> $("#s1").hover(function(){hbtn("s1");}, function(){lbtn("s1");}); <br /> $("#s2").hover(function(){hbtn("s2");}, function(){lbtn("s2");}); <br /> $("#s3").hover(function(){hbtn("s3");}, function(){lbtn("s3");}); <br /> $("#s4").hover(function(){hbtn("s4");}, function(){lbtn("s4");}); <br /> $("#s5").hover(function(){hbtn("s5");}, function(){lbtn("s5");}); <br /> }); <br /> <br /> </script>
| A | B | C | D | E |
回复讨论(解决方案)
<!DOCTYPE html PUBtdC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>练习</title><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script></script><script>$(document).ready(function(){$(".s").bind("mouseover",function(){$(this).css("background","red");});$(".s").bind("mouseout",function(){$(this).css("background","green");});});</script><style>#table1{ margin-left:auto; margin-right:auto; font-family:黑体; font-size:24px; border-spacing:0px 0px;}#table1 td{ background-color:green; background-size:contain; text-align:center; padding:12px; cursor:pointer; height:70px; width:174px; border:2px solid gray;}</style></head><body><table id=table1><tr><td id="s1" class="s">A</td><td id="s2" class="s">B</td><td id="s3" class="s">C</td><td id="s4" class="s">D</td> <td id="s5" class="s">E</td></tr></table></body></html> LS是简单点的写法
你主要错在两处
1.引用的JS文件失效了，你可以访问一下看看。
换这个试试
<script></script>
2.lbtn里面应该是变绿吧？hbtn是变红，你里面给bg-color赋值的地方写反了。
可以写得简洁一点
<!DOCTYPE html PUBtdC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>练习</title><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><style> table{ margin-left:auto; margin-right:auto; font-family:黑体; font-size:24px; border-spacing:0px 0px; } table td{ background-color:green; background-size:contain; text-align:center; padding:12px; cursor:pointer; height:70px; width:174px; border:2px solid gray; } .bg{ background: red; }</style></head><body> <table> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> </table> <script> $(document).ready(function(){ $('td').hover(function(){ $(this).addClass('bg'); },function(){ $(this).removeClass('bg'); }) }) </script></body></html> 陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn