網站-根據鼠標位置更改圖像（2個區域）

Question

我有以下情況非常簡單（1頁，3個區域：left-center-right）：

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>

CSS：

.page { width: 800px; height: 500px; }

.answer-on-the-right-or-left { float: left; width : 300px; height: 500px; }

.picture-in-the-middle { float: left; width : 150px; height: 500px; }

我想做以下事情：

• 當鼠標位於左側區域時，中間的圖片將變為： "/content/images/qres/facecolorleft.png"
• 當鼠標位於右側區域時： "/content/images/qres/facecolorright.png"
• 圖像停留在其他任何地方： "/content/images/qres/faceblackandwhite.png"

我知道如何用JavaScript在圖片上進行鼠標懸停，但是我找不到解決此問題的方法。

先感謝您 ！

Answer 1

為每個區域分配一個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>

並綁定懸停

$('.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');
});