无法让我的 class 切换

Question

我认为我的代码总体上没问题，但我似乎无法让我的 jQuery 切换 classes。这是我的代码片段：

     $("#activity").hover(function () {
    $(this).toggleClass("activitymouseover");
 });

http://jsfiddle.net/0gd6yeyj/ <-- 完整代码在这里

我正在使用脚本源：
src="//code.jquery.com/jquery-latest.js".

悬停时 class 没有变化。我也试过 addClass 和 removeClass 也不起作用。当 toggleClass 更改为另一种方法时，例如。隐藏（）; 代码运行正常？

Answer 1

我建议不要使用 jQuery 而只使用普通的旧 CSS :hover:

#activity:hover {
  width:980px;
  height:177px;
  color: white;
  background-color: #E8D700;
  text-align: center;
  font-size: 64px;
}

请参阅此处 fiddle：http://jsfiddle.net/0gd6yeyj/1/

Answer 2

$("h4").hover(function () {
    $(this).toggleClass("activitymouseover");
});

Working Example

将选择器从 $("#activity") 更改为 $("h4")

Answer 3

问题是 toggleClass 删除并添加了更多 class，而您正在使用 id="activity"。不要使用 id class，请检查：

$(".activity").hover(function () {
    $(this).toggleClass("activitymouseover");
});

.activity {
    width:980px;
    height:177px;
    color: #DCDCDC;
    background-color: #E8D700;
    text-align: center;
    font-size: 64px;
}
.activitymouseover {
    width:980px;
    height:177px;
    color: white;
    background-color: #E8D700;
    text-align: center;
    font-size: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activity">
    <div id="centeringdiv3">
        <h4>Activity</h4>
    </div>
</div>

无法让我的 class 切换

Cannot get my class to toggle

jquery

toggleclass