Question

我正在创建一张世界地图，并且在几个国家/地区都有标志。我需要做的是，当有人在旗帜上盘旋时，与该国家相对应的内容的DIV向下滑动，然后通过单击关闭按钮关闭。

这是我的基本HTML：

<map name="imgworldmap" id="imgworldmap">
 <area shape="poly" coords="446,125,445,126" alt="">
 <area shape="poly" coords="447,123,446,445" alt="">
 etc....
</map>

<ul class="flags-container">
 <li class="us">
  <div class="flyout">Country A</div>
 </li>
 <li class="ht">
  <div class="flyout">Country B</div>
 </li>
 <li class="uk">
  <div class="flyout">Country C</div>
 </li>
</ul>

这是我的jQuery尝试（当然它不起作用，它会带来所有弹出窗口）：

$(function(){
 $('area').hover(function(){
  $('.flyout').toggle();    
 });
});

关闭弹出DIV，我知道该怎么做，所以我不需要帮助。

我需要帮助的是让区域的相应DIV向下滑动。

非常感谢任何帮助。

谢谢！

**编辑

另一个更强大，可扩展的解决方案**

在以下链接中，您将找到一个提供更多功能和更好的可用性的解决方案：

.mouseleave() with .delay() working together

Answer 1

我会将数据属性附加到每个区域，其内容是包含正确弹出窗口的<li>元素的ID。这样可以让你定位正确的元素。

以下是一个例子：

<map name="imgworldmap" id="imgworldmap">
 <area shape="poly" coords="446,125,445,126" alt="" data-code="us">
 <area shape="poly" coords="447,123,446,445" alt="" data-code="ht">
 etc....
</map>

<ul class="flags-container">
 <li id="us">
  <div class="flyout">Country A</div>
 </li>
 <li id="ht">
  <div class="flyout">Country B</div>
 </li>
 <li id="uk">
  <div class="flyout">Country C</div>
 </li>
</ul>

和javascript：

$(function(){
 $('area').hover(function(){
  // Get the data from the hovered element
  var id = $(this).attr("data-code");

  // Toggle the correct div
  $('#'+id+' div').toggle();    
 });
});

所有容器同时出来

1 个答案: