CargoCollective 上的 jQuery 已过时 .hover/.mouseover

Question

在 CargoCollective 上构建一个网站，但他们似乎使用 jQuery 1.4.2，这似乎没有我需要的功能。

所以，我想要的结果是这样的： http://jsfiddle.net/hendos43/a3hFh/ 1/

如果你因为某种原因看不到，如下所示，如果可以的话，请跳到代码后面：

目标：

员工照片库，将鼠标悬停在其上方时将显示 bio（单独的div），不会在mouseOut时消失（当鼠标 停止悬停在图像上），但会停留在那里，直到出现另一个图像 悬停在上方，触发下一个鼠标悬停事件。

我使用的代码是这样的：

JS:

 $(document).ready(function() {
    $('a[id^="link"]').mouseover(function() {
        $div = $('div#' + $(this).data('hide'));
        $div.siblings('[name^="people_bio"]').fadeOut(0).end().fadeIn(200, function() {
            if (!$div.is(':visible')) {
                $('nothing').fadeIn(40);
            }
        });
    });
});​

CSS:

#chris,
#patrick,
#jonathan,
#toby { position:absolute;
    left:285px;
    top:10px;
    border: 0px;
    background:none;
    padding: 5px; 
    width: 150px;
}

#holder { width:270px;
    position:absolute;
    top:10px;
    left:10px;}                

.hidden{
    display:none;
}
.shown{
    display:block;
}
​

HTML:

<div id="holder">
    <a id="link_chris" href="javascript:"  data-hide="chris"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_patrick" href="javascript:"  data-hide="patrick"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_jonathan" href="javascript:"  data-hide="jonathan"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_toby" href="javascript:"  data-hide="toby"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
</div>

      <div name="people_bio" id="chris" class="hidden">chris' bio</div>
      <div name="people_bio" id="patrick" class="hidden">patrick's bio</div>
      <div name="people_bio" id="jonathan" class="hidden">jonathan's bio</div>
      <div name="people_bio" id="toby" class="hidden">toby's bio</div>
​

不幸的是，这似乎不起作用，大概是因为 1.4.4 中 jQuery 在该功能上的功能发生了一些变化，而 Cargo 使用 1.4.2？

使用 jsFiddle 中的测试选项，它可以在 1.4.4 中工作，但不能在 1.4.2 中工作，并且在自定义 HTML 部分中链接 1.7 似乎会破坏网站的其余部分，并使此功能正常工作，但 div 忽略了它们无论如何，CSS 风格的定位。也尝试过 .hover 具有相同的效果。

请问有人有解决办法吗？

（请忽略图像是相同的，这是说明性的）。

Answer 1

而不是使用 data

您可以使用 rel Demo< /a> 正在开发 1.3.2