Home > Article > Web Front-end > Help me find out what went wrong...._html/css_WEB-ITnose
Help me find out what went wrong...._html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:22:531144browse
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:
075838baa798d747403af106514b661a
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Exercise6e916e0f7d1e588d4f442bf645aedb2f
5177da693a7b3f7499c76c7a30131b46
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(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");});
});
2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
#table1{
margin-left:auto;
margin-right:auto;
font-family: bold;
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;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
193d2ab2a8dc1eb40beb314999b67193
a34de1251f0d9fe1e645927f19a896e8
31a44800bb6a18458e7199a4bbaacaa0Ab90dd5946f0946207856a8a37f441edf
b262be78611d67cf2202df04006d9efeBb90dd5946f0946207856a8a37f441edf
6bfb17fbe99c9496cb1ec9d2388dc3b6Eb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
e6d621a2912e784107ba307ae077a6ca
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
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> 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
2f45be506839779ae40830e0ea51f4532cacc6d41bbb37262a98f745aa00fbf0
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>