Cannot get my class to toggle

Question

I think my code is OK overall but i can't seem to get my jQuery to toggle classes. Here is a snippet of my code:

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

http://jsfiddle.net/0gd6yeyj/ <-- Full code here

I'm using a script source:
src="//code.jquery.com/jquery-latest.js".

I get no change in class on a hover. I've tried addClass and removeClass also which doesn't work either. When toggleClass is changed to another method such as .hide(); The code works fine?

Answer 1

The problem is that toggleClass remove and add more classes and your are using id="activity". Instead of id use class, check this:

$(".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>