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

Question

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

Answer 1

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