0

私は非常に単純な次の状況を持っています (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>

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 を使用して画像上でマウスオーバーを行う方法は知っていますが、この問題の解決策が見つかりません。

前もって感謝します ！

4

1 に答える 1

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');
});
于 2012-05-16T09:44:16.370 に答える