Jquery 将鼠标悬停在show div上的图像映射

因此，我尝试在一张图片上创建多个图像贴图，然后基于您悬停在上面的图像，它将从图片下方的div中提取特定信息，并填充到悬停在上面的图像旁边

<div class="runner_div">
  <img src="http://cooleycollective.com/test/slrc/wp-content/uploads/2013/01/Em_full.jpg" width="680" height="705" usemap="#runner_wear" /></a></p>
<map name="runner_wear">
  <area shape="poly" coords="264,18,237,33,243,72,276,83,328,79,311,29," href="#hat" alt="hat"  />
  <area shape="rect" coords="259,69,331,99" href="#" alt="glasses" />

  </map>
</div>

<div class="gear" id=hat>
<h2>Type of hat</h2>
  <p>I love this hat.I wore it when I was running from a bear in the zoo.</p>
</div>
<div class="gear" id="glasses">
  <p>These glasses were hand picked by a Sherpa from Kentucy!</p>
</div>  

帽子类型
我喜欢这顶帽子。我在动物园里从熊身边跑开时戴的

这些玻璃杯是肯塔基州的夏尔巴人亲手挑选的

我希望div保持在下方，这样就不会被隐藏，而且当我将鼠标悬停在它引用的图像上时，它还具有可悬停的功能。我不确定是否需要使用jQuery来实现这一点，甚至不知道如何创建这段代码

---

我觉得代码会这样做：onmouse悬停这个imgmap，然后显示这个imagemap引用的div。我不知道这在代码语言中是什么样子。谢谢你的帮助。

我想你想要弹出效果

下面是工作jQuery

var $popup = $('.popup');
$('area').on({
  mouseover : function(e){
    var $this = $(this),
        $obj = $('#'+$this.prop('alt'));

    $popup.text($obj.text()).css({
      top: e.pageY + 25,
      left: e.pageX - ($popup.width()/2),
    }).show();
  },
  mouseout: function(){
    var $this = $(this),
        $obj = $('#'+$this.prop('alt'));    

    $popup.hide(0).empty();
  }
});

---

我想你想要弹出效果

下面是工作jQuery

var $popup = $('.popup');
$('area').on({
  mouseover : function(e){
    var $this = $(this),
        $obj = $('#'+$this.prop('alt'));

    $popup.text($obj.text()).css({
      top: e.pageY + 25,
      left: e.pageX - ($popup.width()/2),
    }).show();
  },
  mouseout: function(){
    var $this = $(this),
        $obj = $('#'+$this.prop('alt'));    

    $popup.hide(0).empty();
  }
});

---

我正试图让它在wordpress中工作，但它不起作用。它还搞乱了我正在运行的另一个脚本。知道为什么会发生这种情况吗？@Tim Cooley请告诉我错误是什么，这样我就可以检查它了。这听起来像是全局

$

变量，但我们可以检查它是否是其他变量。我似乎找不到错误。这是它所在的网站。也许你能看到一些我看不到的东西。上面的代码看起来工作正常，您遇到的问题与响应

404

错误的文件有关，这意味着

未找到

。指向文件位置的链接不正确。请检查路径并重试。有两个文件，

slides.min.jquery.js

，和

jquery.easing.js

；这两个都不见了。好的，谢谢。我可以参考那些带标签的吗？它应该会起作用吗？我正在wordpress中尝试让它起作用，但它不起作用。它还搞乱了我正在运行的另一个脚本。知道为什么会发生这种情况吗？@Tim Cooley请告诉我错误是什么，这样我就可以检查它了。这听起来像是全局

$

变量，但我们可以检查它是否是其他变量。我似乎找不到错误。这是它所在的网站。也许你能看到一些我看不到的东西。上面的代码看起来工作正常，您遇到的问题与响应

404

错误的文件有关，这意味着

未找到

。指向文件位置的链接不正确。请检查路径并重试。有两个文件，

slides.min.jquery.js

，和

jquery.easing.js

；这两个都不见了。好的，谢谢。我可以参考那些带标签的吗？它应该有效吗？