div will not change color when mouse enters the field

Question

I'm having trouble changing the background color of a div when the mouse enters the field of the div. I'm using javascript/jquery to attempt this but nothing seems to be happening. Posted is a link of the html I'm trying to access, the css, and the javascript.

Can anyone tell me why this isn't working??? I can't seem to figure it out and the other examples on here have 1000's of solutions that just do not work when I try to use them.

// THE HTML

    <section class="box content">
     <div id="projects"></div>
    <div class="container">
      <h2>Title Three</h2>
      <p>content goes here</p>
      <div class="someContent">

        <p>more stuff change me
        </p>
      </div>
    </div>
  </section>

// THE CSS

.someContent {
width: 60%;
margin-left: 100px;
border: 2px solid black;
text-align: left;
}

.hightLight {
background-color: yellow;
border: 2px solid blue;
}

// THE JAVASCRIPT

(document).ready(function() {
$(".someContent").on("mouseenter", function() {
$(this).addClass("highLight");
}).on("mouseleave", function() {
$(this).removeClass("highLight");
});
});

// lastly the tags added at my html top

<!-- css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">

<!-- js -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/scroll.js"></script>

Why isn't the div ".someContent" not changing ? >-<

Answer 1

Rename your .hightLight selector in your CSS to .highLight. And also add a $ in front of your first line of JavaScript:

$(document).ready(function() {