Help me find out what went wrong...._html/css_WEB-ITnose-HTML Tutorial-php.cn

I did a small exercise and wanted to change the background color of the menu item every time the mouse slides over it. Why has there been no change....The code is as follows:

"http://www.w3. org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">

Exercise

<script> $(document).ready(function(){ function hbtn(btn) { $("#" btn).css("background-color", "green"); } function lbtn(btn) { $("#" btn).css("background-color" , "red"); } $("#s1").hover(function(){hbtn("s1");}, function(){lbtn("s1");}); $("#s2").hover(function(){hbtn("s2");}, function(){lbtn("s2");}); $("#s3") .hover(function(){hbtn("s3");}, function(){lbtn("s3");}); $("#s4").hover(function(){hbtn(" s4");}, function(){lbtn("s4");}); $("#s5").hover(function(){hbtn("s5");}, function(){ lbtn("s5");}); }); </script>

Reply to discussion (solution)

<!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>

Copy after login

LS is Simple way of writing
You are mainly wrong in two places
1. The referenced JS file is invalid, you can visit it and take a look.
Try this one instead

Inside 2.lbtn It should be turning green, right? hbtn turns red, and the place where you assign the value to bg-color is written backwards.

You can write it more concisely

<!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>

Copy after login

Related labels：

帮忙看看到底哪里出错了....

source：php.cn

Previous article：Solve the explanation of action="#" in the form tag_html/css_WEB-ITnose Next article：Please recommend..._html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn