Question

当鼠标进入div字段时，我无法更改div的背景颜色。我正在使用javascript / jquery尝试这个但似乎没有发生任何事情。发布是我正在尝试访问的html的链接，css和javascript。

谁能告诉我为什么这不起作用???我似乎无法弄清楚，这里的其他示例有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”没有改变？＆GT; - ＆LT;

Answer 1

将CSS中的.hightLight选择器重命名为.highLight。并在第一行JavaScript前添加$：

$(document).ready(function() {

Answer 2

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

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

当鼠标进入该字段时，div不会改变颜色

2 个答案: