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

Website - Change image depending on mouse position (2 zones)

本文关键字：图像 区域 鼠标 位置 网站      更新时间：2023-09-26

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

.HTML：

<div class="page">
    <div class="answerswer-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="answerswer-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将鼠标悬停在图片上，但是我找不到此问题的解决方案。

提前谢谢你！

为每个区域分配一个 id：

<div class="answerswer-on-the-right-or-left" id="leftZone">Left Zone</div>
<div class="answerswer-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');
});
相关文章：