帮忙看看到底哪里出错了...._html/css_WEB-ITnose-html教程-PHP中文网

帮忙看看到底哪里出错了...._html/css_WEB-ITnose

WBOY

发布： 2016-06-24 12:22:53

原创

1181 人浏览过

做了一个小练习，想要每次鼠标滑过菜单项时，菜单项的背景色改变一下。为什么没变化呢....代码如下：
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>

回复讨论(解决方案)

<!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文件失效了，你可以访问一下看看。
换这个试试

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>

登录后复制