javascript - 在鼠标悬停时更改 div 背景图像并单击单独的位置

Question

我目前正尝试将鼠标悬停在背景图片上，然后在单独的 div 中查看新图片。哪个有效(使用下面的代码)，但是我似乎无法在单击图像时更改它。下面是代表我正在努力完成的图像。

1 http://pkg.madisonmottdev.com/images/1.png

悬停或点击时(2 楼相同) 2 http://pkg.madisonmottdev.com/images/2.png

当前用于悬停的 Javascript 代码可以正常工作。我只是想不通如何点击(一楼或二楼并在右侧更改)。任何帮助表示赞赏。

 $(window).load(function(){
        $(document).ready(function(){
            // FIRST FLOOR
            $('.floor1').mouseover(function(){
                $('.floor1').css('background', 'url("images/phase-2/first-floor-hover.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/first-floor-lg.a.png") no-repeat');
            });
            $('.floor1').mouseout(function(){
                $('.floor1').css('background', 'url("images/phase-2/first-floor.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/elevation.a.png") no-repeat');
            });

             // SECOND FLOOR
            $('.floor2').mouseover(function(){
                $('.floor2').css('background', 'url("images/phase-2/second-floor-hover.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/second-floor-lg.a.png") no-repeat');
            });
            $('.floor2').mouseout(function(){
                $('.floor2').css('background', 'url("images/phase-2/second-floor.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/elevation.a.png") no-repeat');
            });

        });
    });  

HTML 代码(floor1, floor2 & elevation 设置为具有高度/宽度的背景图像):

        <div id="building">
                <div id="floor">
                  <div class="floor1"></div>
                </div>

                <div id="floor">
                  <div class="floor2"></div>
                </div>
        </div>

Answer 1

这就是您所追求的吗？

http://jsfiddle.net/98wuW/19/

诀窍在于，如果您单击了 floor1，则 floor1.mouseout 无法删除 #elevation 中的 floor1 图像。

就目前而言，您有 floor1.mouseout 将#elevation 的背景图像更改回默认值。因此，假设您将鼠标悬停在 floor1 上。然后将鼠标移离 floor1。然后 floor1.mouseout 会将 #elevation 的背景图像设置回默认值。

诀窍在于，当您单击 floor1 时，您必须设置一个标志或表示“将 floor1 图像保持在#elevation 中”的内容。然后在 mouseout 中，您可以检查该标志以查看是否可以删除 #elevation 中的地板图像。

你的例子有点棘手，因为你有两层楼，都可以点击，所以你必须在每次鼠标移出时检查两个标志。