更改鼠标上方的div背景图像&单击另一个位置

Question

我目前正试图悬停在背景图像上，并在一个单独的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>

Answer 1

你想要的是这种东西吗？

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

诀窍是，如果您单击了floor1，那么floor1.mouseout就不能删除#海拔中的floor1图像。

就目前情况而言，您可以使用floor1.mouseout将#海拔的背景图像更改为默认值。因此，假设您在floor1上空盘旋。然后将鼠标移离floor1。接着，floor1.mouseout将#海拔的背景图像设置为默认值。

诀窍是，当您单击floor1时，您必须设置一个标志或其他东西，上面写着“将floor1图像保持在#海拔”。然后，在鼠标中，您可以检查该标志，看看是否可以删除地面图像中的#高程。

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

Answer 2

单击时不会发生任何事情，因为没有任何侦听器绑定到click事件。

尝试将代码的一部分更改为：

    // 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/