I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I try to run it from index.html on my computer in Chrome or Firefox, it fails to work. Even when I manually input the jQuery code in the console, it works fine! All the files are properly linked, I have double-checked using alert. The div should turn red and then change color when hovered over, but it's not happening. Any advice?
$('.test').hover(
function() {
$(this).toggleClass('testhover');
});.test {
width: 100px;
height: 100px;
background-color: red;
}
.testhover {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>