My code is almost perfect, but the jQuery function is giving me trouble. It works fine in jsfiddle, but for some reason, it's not functioning in my HTML file. I don't believe extra characters are being added when copying from the HTML file. I haven't made any changes to the HTML file; just copied and pasted the code into jsfiddle where it started working. The big gap with black squares denotes the location of an image sourced from a local file. The jQuery function is positioned just above the body element. As a newcomer to coding, I realize the mistake is likely trivial for someone with years of experience.
<html><head>
/* Code removed for brevity */
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$(this).css("background-color", "#4c6ccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
/* Code removed for brevity */
</head>
/* Code removed for brevity */