在鼠标悬停时更改 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 代码（地板 1、地板 2 和高程设置为具有高度/宽度的背景图像）：

        <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 中的地板图像。

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

Answer 2

当您单击时没有任何反应，因为您没有任何侦听器绑定到单击事件。

尝试将部分代码更改为：

    // FIRST FLOOR
    $('.floor1').click(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');
    });

你会看到行为上的不同——我已经从 mouseover 更改为 click 事件。

您可以像这样将多个事件绑定到同一个侦听器：

$('.floor1').bind('click mouseover', function() {...});

编辑

根据您的最后一条评论，请参阅此小提琴以实现您的要求：

http://jsfiddle.net/BzPdB/