悬停时的addclass不起作用

Question

我想将鼠标悬停在一个元素上（实际上是一个图像映射区域，但我为此示例创建了一个简单的div）并在另一个div元素上创建动画。因为他们不是孩子或兄弟姐妹，我不得不使用java和addclass但它不起作用。看起来触发元素无法识别，如果我悬停它没有任何反应

<div class="testHover">
  <p>Hover me to change color</p>
</div>
<div id="timeLine">
  <div id="primaGuerraMondiale">
        <h2>Content</h2>
  </div>
</div>

CSS

#primaGuerraMondiale {
background: green;
}
.animated {
color:white;
}

的javascript

$('.testHover').hover(function() {
$('#primaGuerraMondiale').addClass('animated');
}, function() {
$('#primaGuerraMondiale').removeClass('animated');
});

这是小提琴https://jsfiddle.net/elisapessa/yzLe803n/

Answer 1

您需要jQuery 1.9.1及更高版本才能使其正常运行。代码是对的。

Answer 2

在jsfiddle的左侧面板中，有一个名为＆＃34; Add Resources＆＃34;的部分。单击此按钮，然后将URL添加到该字段中，然后单击+按钮。这会将您的资源（JS或CSS）添加到页面中。之后，单击运行并检查它：