Question

在CargoCollective上构建一个站点，但看起来他们使用的是jQuery 1.4.2，它似乎没有我需要的功能。

所以，我的目标是：http://jsfiddle.net/hendos43/a3hFh/1/

如果您由于某种原因无法看到，如果可以的话，请跳过，直到代码之后：

目标：

员工的照片库，当悬停在上面时会显示生物（单独的div），它不会消失onmouseOut（当鼠标停止盘旋在图像上），但会留在那里，直到另一个图像盘旋，触发下一次鼠标悬停事件。

我使用的代码是：

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>

不幸的是，这似乎不起作用，大概是因为jQuery在1.4.4中对此功能的运行有一些变化，而货物使用1.4.2？

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

有人有任何解决方案吗？

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

Answer 1

您可以使用data

而不是rel

Demo致力于1.3.2

关于CargoCollective的jQuery已经过时了.hover / .mouseover

1 个答案: