【萌新求救】如何用jq实现鼠标移动到格子变色，鼠标点击变另一种颜色，再次点击变回原色

[weixin_40645106]

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function()
{$("#color").click(function()
{
$("#color").toggleClass(cr);
});
});
function mover(obj)
{
obj.style.backgroundColor="red";
}
function mout(obj)
{
obj.style.backgroundColor="blue";
}
</script>
<style type="text/css">
#color
{
background-color: blue;
width: 50px;
height: 50px;
border: 2px solid yellow;

}
.cr
{
background-color: green;
width: 50px;
height: 50px;
border: 2px solid yellow;
}
</style>
<div id="color" onmouseover="mover(this)" onmouseout="mout(this)"></div>



我的代码如上，可是只能实现鼠标移入移出变色，点击没有反应，我是哪里出错了？
或者有什么更优方法来实现吗？
再次点击要恢复成未点击前也就是红色。

[天际的海浪]

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function()
		{$("#color").click(function()
			{
				$("#color").toggleClass("cr");
			});
});
function mover(obj)
		{
			obj.style.backgroundColor="red";
		} 
		function mout(obj)
		{
			obj.style.backgroundColor="blue";
		}
</script>
<style type="text/css">
#color
		{
			background-color: blue;
			width: 50px;
			height: 50px;
			border: 2px solid yellow;

		}
		.cr
		{
			background-color: green !important; 
			width: 50px;
			height: 50px;
			border: 2px solid yellow;
                }
</style>
<div id="color" onmouseover="mover(this)" onmouseout="mout(this)"></div>