Question

我有一个篮球场的图像地图，我把它映射到了区域：区-A 区域-B..so on

当用户徘徊时，让我说，Area-C，我希望DIV篮球场隐藏，DIV basketballcourt-c展示。但是当我使用切换时，每当用户将鼠标移动到Area-C上时，它就会从.basketballcourt-c切换到.basketballcourt。我需要的是.basketballcourt保持隐藏，直到用户从Area-C徘徊。

将鼠标悬停在Area-C上，隐藏.basketballcourt，直到将其悬停在Area-C之外我认为问题是图像映射的区域仍然存在，因此如果用户在区域C中移动鼠标，它将切换。

所以我需要在鼠标位于Area-C时隐藏.basketball球场，然后在离开Area-C时显示.basketballcourt。但是当鼠标位于Area-C时，不要切换两者。

CODE：

<div class="basketballcourt">
<img src="img/court_lg.jpg" width="540" height="357" border="0" usemap="#court" />
<map name="court" id="court">
<area shape="poly" id="court-c" coords="71,301,217,301,217,129,323,129,323,301,468,301,468,171,446,132,422,102,390,76,355,57,317,44,277,39,240,41,203,50,163,67,123,98,88,139,71,172" href="#" alt="court-c" />
<area shape="poly" id="court-e" coords="539,214,468,213,469,170,449,135,422,100,391,75,353,54,313,41,270,37,234,40,192,53,153,72,115,104,87,140,70,171,69,213,0,212,0,0,541,-1" href="#" alt="court-e" />
<area shape="poly" id="court-a" coords="235,253,305,253,303,240,295,227,284,220,269,217,252,221,239,234" href="#" alt="court-a" />
<area shape="poly" id="court-b" coords="321,300,322,129,218,130,218,300" href="#" alt="court-b" />
<area shape="poly" id="court-d" coords="1,300,0,213,69,213,70,301,469,300,469,213,538,214,538,301" href="#" alt="court-d" />
</map>
</div>
<div class="basketballcourt-c">
<img src="img/court-lg_c.jpg" width="540" height="357" border="0">
</div>
<script type="text/javascript"> 
    $("#court-c").hover(function () {
    $(".basketballcourt-c").toggle();
    $(".basketballcourt").toggle();
        });
</script>

Answer 1

图片地图位于div.basketballcourt内当您将鼠标移到#court-c上时，div.basketballcourt会被隐藏，当图像图被隐藏时，鼠标会在图像图上被触发，从而导致反向切换。

Answer 2

在悬停期间使用jQuery .mouseenter()和.mouseleave()事件...... .hover（）填充的时间超过准时...

Answer 3

这是我最终做的事情。我为图像映射添加了一个PNG，给它一个非常高的z-index，并在其下面放置多个div，隐藏并根据PNG的悬停显示它们。似乎工作得很好。由于不可见的PNG将始终位于顶部，因此图像映射不会消失。

感谢您帮我思考。

除非有人能想出更好的处理方式吗？

Answer 4

好的，这就是我成功尝试的...我真的不知道，你究竟想要实现什么，但这有效：

<html>
    <head>
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
        var entered = false;
        function areaEntered(){
            if (!entered){
                $(".basketballcourt-c").hide();     
            }
            entered = true
        }
        function areaLeft(){
                $(".basketballcourt-c").show();     
                entered = false;
        }
        </script>
    </head>
    <body>
        <div class="basketballcourt" style="border: solid 2px black;background-color: #66F;">
            <img src="img/court_lg.jpg" width="540" height="357" border="0" usemap="#court" />
            <map name="court" id="court" style="background-color=black;">
                <area onMouseOver="javascript: areaEntered();" onMouseOut="javascript: areaLeft();" shape="poly" id="court-c" style="border: solid 2px black;" coords="71,301,217,301,217,129,323,129,323,301,468,301,468,171,446,132,422,102,390,76,355,57,317,44,277,39,240,41,203,50,163,67,123,98,88,139,71,172" href="#" alt="court-c" />
                <area shape="poly" id="court-e" coords="539,214,468,213,469,170,449,135,422,100,391,75,353,54,313,41,270,37,234,40,192,53,153,72,115,104,87,140,70,171,69,213,0,212,0,0,541,-1" href="#" alt="court-e" />
                <area shape="poly" id="court-a" coords="235,253,305,253,303,240,295,227,284,220,269,217,252,221,239,234" href="#" alt="court-a" />
                <area shape="poly" id="court-b" coords="321,300,322,129,218,130,218,300" href="#" alt="court-b" />
                <area shape="poly" id="court-d" coords="1,300,0,213,69,213,70,301,469,300,469,213,538,214,538,301" href="#" alt="court-d" />
            </map>
        </div>
        <div class="basketballcourt-c" style="border: solid 2px black; background-color: #0C6;">
            <img src="img/court-lg_c.jpg" width="540" height="357" border="0">
        </div>
    </body>
</html>

Jquery悬停，图像映射，切换问题

4 个答案: