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＆amp; elevation设置为高度/宽度的背景图片）：

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

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

Answer 1

单击时没有任何反应，因为您没有绑定到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/

Answer 2

这就是你想要的东西吗？

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

诀窍是如果你点击了floor1，那么floor1.mouseout就无法删除#elevation中的floor1图像。

按照目前的情况，您可以使用floor1.mouseout将#elevation的背景图像更改回默认值。所以假设你将鼠标悬停在floor1上。然后将鼠标移离floor1。然后floor1.mouseout将#elevation的背景图像设置回默认值。

诀窍在于，当你点击floor1时，你必须设置一个标志或者说“在#elevation中保留floor1图像”。然后在mouseout中，您可以检查该标志以查看是否可以删除#elevation中的楼层图像。

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

在mouseover＆amp;上更改div背景图像单击一个单独的位置

2 个答案: