jquery悬停，图像映射，切换问题答案

【问题标题】：Jquery hover, image map, toggle problemjquery悬停，图像映射，切换问题
【发布时间】：2011-04-07 10:54:07
【问题描述】：

我有一个篮球场的图像地图，我将它绘制在以下区域： A区区域-B..等等

当用户将鼠标悬停在区域 C 上时，我希望隐藏 DIV 篮球场并显示 DIV 篮球场。但是当我使用切换时，每次用户将鼠标移到区域 C 上时，它都会从 .basketballcourt-c 切换到 .basketballcourt。我需要的是 .basketballcourt 保持隐藏状态，直到用户将鼠标悬停在区域 C 之外。

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

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

代码：

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

【问题讨论】：

标签： jquery hover toggle

【解决方案1】：

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

【讨论】：

这是有道理的。因此，如果我将鼠标悬停在区域 C 上并希望出现另一个图像，它将替换图像映射，使其隐藏，这会反转我的切换。我该怎么做？
检查悬停功能。如果图像地图被隐藏，请不要执行切换方法。

【解决方案2】：

使用 jQuery .mouseenter() 和 .mouseleave() 事件... .hover() 填充在悬停期间被触发的时间超过...

【讨论】：

我仍然有同样的问题，因为当 mouseenter() 被调用时，图像映射被掩盖了，使它认为它发生了 mouseleave()。
虽然很棘手...mouseenter 和leafe 在该区域移动时会不断开火...

【解决方案3】：

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

感谢您帮助我思考问题。

除非有人能想出更好的方法来处理这个问题？

【讨论】：

【解决方案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>

【讨论】：