Having problems with mouseover/mouseout script

Hi there

I'm customizing a template in wordpress, and the author has written a bit of javascript which changes a box colour on mouseover.

Problem is that when I try to change the mouseover/mouseout colours - it reverts back to the template default.

I have checked every single php file which the bit of script appears in and have changed that to the colours I want - yet it still reverts to the default.

I am a complete noob when it comes to JS so can someone show me where I am going wrong?

This is the bit of code:

echo '<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#fbox_35").mouseover(function(){
$(this).css("background-color","#274068;");
});
$("div#col1.box").mouseout(function(){
$(this).css("background-color","#274068");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div#fbox_34").mouseover(function(){
$(this).css("background-color","#91a833");
});
$("div#fbox_34").mouseout(function(){
$(this).css("background-color","#91a833");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div#fbox_33").mouseover(function(){
$(this).css("background-color","#27b1ce");
});
$("div#fbox_33").mouseout(function(){
$(this).css("background-color","#23c2e3");
});
});
</script>' . "/n";
}

The colours are the colours I want them changed to - but it seems to still be calling the script from an earlier version..

Any advice I would very much appreciate!

First off I did not use the php echo. Just grabbed the jquery and then made three div to test them on.

Put the jq into a single script with a single $(document).ready(function() Next why the mouseout(function() s when your not changing anything? In first mouseover remove the ';' in the color selector.
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#fbox_35").mouseover(function(){
$(this).css("background-color","#274068");
});
$("div#col1.box").mouseout(function(){
$(this).css("background-color","#274068");
});
$("div#fbox_34").mouseover(function(){
$(this).css("background-color","#91a833");
});
$("div#fbox_34").mouseout(function(){
$(this).css("background-color","#91a833");
});
$("div#fbox_33").mouseover(function(){
$(this).css("background-color","#27b1ce");
});
$("div#fbox_33").mouseout(function(){
$(this).css("background-color","#23c2e3");
});
});
</script>

The divs
<div id="fbox_35" style="background-color:red;color:white;">This is the one</div>
<div id="fbox_34" style="background-color:red;color:white;">This is the second one</div>
<div id="fbox_33" style="background-color:red;color:white;">This is the last one</div>
<div id="col1" class="box" style="background-color:red;color:white;">This is the cute one</div>
I think you have other problems in you code.