Javascript 网站-根据鼠标位置更改图像（2个区域）

我有以下非常简单的情况（1页，3个区域：左-中-右）：

HTML:

<div class="page">
    <div class="answer-on-the-right-or-left">
        Left zone
    </div>

    <div class="picture-in-the-middle">
        <img src="@Url.Content("/content/images/qres/faceblackandwhite.png")"/>
    </div>

    <div class="answer-on-the-right-or-left">
        Right zone
    </div>
</div>

我想做以下几件事：

• 当鼠标在左侧区域时，中间的图片改变为：<代码> /内容/图像/QRES/FACECOLROLL。PNG“< /COD> < /LI>”
• 当鼠标位于右侧区域时：

  “/content/images/qres/facecolorright.png”

• 在其他任何地方，图像都会保留：

  “/content/images/qres/faceblackandwhite.png”

我知道如何用javascript在图片上进行鼠标悬停，但我找不到解决这个问题的方法

---

提前谢谢你

为每个分区分配一个id：

<div class="answer-on-the-right-or-left" id="leftZone">Left Zone</div>
<div class="answer-on-the-right-or-left" id="rightZone">Right Zone</div>

---

谢谢你的回答，我正在尝试。我忘了问我们是否可以预加载这些图像（否则用户将不得不等待图像更改）。它工作得很好，谢谢！（如果您知道集成预加载的方法，加载图像时只需稍微延迟…）

<div class="answer-on-the-right-or-left" id="leftZone">Left Zone</div>
<div class="answer-on-the-right-or-left" id="rightZone">Right Zone</div>

$('.answer-on-the-right-or-left').hover(function() {
   var id = $(this).attr('id');
   var img = $('.picture-in-the-middle img');

   if(id == 'leftZone') img.attr('src', '/content/images/qres/facecolorleft.png');
   else if(id == 'rightZone') img.attr('src', '/content/images/qres/facecolorright.png');

}, function() {
   $('.picture-in-the-middle img').attr('src', '/content/images/qres/faceblackandwhite.png');
});