Javascript 当div悬停时更改图像

我整天都在寻找解决办法。我试着做这样的东西：

sigma-topline2012.com/en us/topline-2012/bc-5-12/overview.html#highlight

正如你们所看到的，当我们在右边的描述上移动鼠标时，图像正在改变。有人能帮我做这些吗？谢谢

使用jQuery

第1类
第2类
第3类

$（文档）.ready（函数（）{
var img=$（“#图像”）；
$（'li'）。悬停（函数（）{
img.attr（'src'，$（this.data（'link'））；
});    
});

只需将css类添加到fadein/out

尝试以下操作：

<div id="definition1">Definition 1</div>
<div id="definition2">Definition 2</div>
<img id="imageWrapper" src="image1.png" />

---

欢迎使用堆栈溢出，您应该解释您尝试过的方法。您可以从jQuery函数开始。

<div id="definition1">Definition 1</div>
<div id="definition2">Definition 2</div>
<img id="imageWrapper" src="image1.png" />

$("#definition1").hover(function(){
    $('#imageWrapper').attr("src", function(index, attr){
        return attr.replace("image1.png", "image2.png");
    });
}, function(){
    $('#imageWrapper').attr("src", function(index, attr){
        return attr.replace("image2.png", "image1.png");
    });
});