div 鼠标进入时不会改变颜色

Question

当鼠标进入 div 的字段时，我无法更改 div 的背景颜色。我正在使用 javascript/jquery 来尝试此操作，但似乎没有任何反应。发布的是我正在尝试访问的 html、css 和 javascript.

的 link

谁能告诉我为什么这不起作用？？？我似乎无法弄清楚，这里的其他示例有 1000 种解决方案，但当我尝试使用它们时，这些解决方案都不起作用。

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

// CSS

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

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

// JAVASCRIPT

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

// 最后在我的 html 顶部添加的标签

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

为什么 div“.someContent”没有改变？ >-<

Answer 1

将 CSS 中的 .hightLight 选择器重命名为 .highLight。并且还在 JavaScript:

的第一行前面添加一个 $

$(document).ready(function() {

Answer 2

虽然我是 javascript 的忠实粉丝，但这是一个使用 css 的案例：

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

div 鼠标进入时不会改变颜色

div will not change color when mouse enters the field

javascript

jquery

html

background

mouseenter