Не могу получить мой класс для переключения

Question

Я думаю, что мой код в порядке, но я не могу заставить jQuery переключать классы. Вот отрывок из моего кода:

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

< http://jsfiddle.net/0gd6yeyj/ - Полный код здесь

Я использую источник сценария:
SRC = "// code.jquery.com/jquery- latest.js».

У меня нет изменений в классе при зависании. Я также пробовал addClass и removeClass, который тоже не работает. Когда toggleClass изменен на другой метод, например .hide(); Код работает нормально?

Answer 1

Проблема в том, что toggleClass удаляет и добавляет больше классов, и вы используете id="activity". Вместо идентификатора использования класса, проверить это:

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

Answer 2

Я хотел бы предложить вместо того, чтобы использовать JQuery, чтобы просто использовать обычный старый CSS :hover:

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

См скрипку здесь: http://jsfiddle.net/0gd6yeyj/1/

Answer 3

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

Working Example

Изменить селектор от $ ("#activity") до $ ("h4")