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

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

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

悬停或单击时（与二楼相同）
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和高程设置为具有高度/宽度的背景图像）：
            

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

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

最佳答案

这样的事情是你所追求的吗？

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

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

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

诀窍在于，当您单击floor1时，您必须设置一个标记或类似“在#elevation中保持floor1图像”的内容。然后，在鼠标移出时，您可以检查该标记以查看是否可以删除#elevation中的地面图像。

您的示例有点棘手，因为您有两层楼，都可以单击，因此您必须在每次mouseout上检查两个标志。