jquery hover any element changes img in one element
I really cannot see why this shouldnt work, comments please?
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$document.ready(function(){
$('.doit').hover(function(){
$('#cy > img').attr('src', '/images/7.png');
});
});
</script>
</head>
<body>
<div id="tasc" class="doit"><a href=""><img src="/images/1.jpg" alt="tasc"/></a></div>
<div id="dsc" class="doit"><a href=""><img src="/images/2.jpg" alt="dsc"/></a></div>
<div id="tma" class="doit"><a href=""><img src="/images/3.jpg" alt="tma"/></a></div>
<div id="lta" class="doit"><a href=""><img src="/images/4.jpg" alt="lta"/></a></div>
<div id="hsm" class="doit"><a href=""><img src="/images/5.jpg" alt="hsm"/></a></div>
<div id="cy" class="doit"><a href=""><img src="/images/6.png" alt="cy" /></a></div>
</div>
</body>
As far as I can figure it hover over any of the divs should change #cy >img from 6 to 7 but it doesn't