jQuery on CargoCollective过时.hover/.mouseover

在CargoCollective上构建一个站点，但似乎他们使用的jQuery 1.4.2似乎没有我需要的功能。jQuery on CargoCollective过时.hover/.mouseover

所以，我的目标结果是这样的：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>

UNF幸运的是，这似乎并不奏效，大概是因为1.4.4中jQuery在这个功能上的功能发生了一些变化，货物使用了1.4.2？

使用jsFiddle中的测试选项，它在1.4.4中工作，但不在1.4.2中，并且在自定义HTML部分中连接1.7看起来会破坏网站的其余部分，并使该功能可用，但无论如何，divs忽略了他们的CSS风格的定位。也尝试过。具有相同的效果。

任何人有任何解决方案，请？

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

来源

2012-02-23 hendos43

而不是使用data的，你可以使用rel

Demo 1.3.2

来源

2012-02-23 17:14:12 shaunsantacruz

谢谢您的合作！似乎工作，当我编辑后内容（http://img641.imageshack.us/img641/4237/screenshot20120223at173.png），但它不会工作时，实际上在网站上（oval-uk.com - 点击'人'），它也没有设计出正确显示的div。想法？ – hendos43 2012-02-23 17:39:51

CSS是否被缓存？如果是这样，请尝试在样式表链接的末尾添加？ver = 1，如下所示：styles.css？ver = 1 – shaunsantacruz 2012-02-23 18:12:03

由于它是在Cargo中构建的，因此在编辑代码时会遇到许多问题。 CSS有用地位于'编辑CSS'按钮下方，而不是在可编辑的HTML区域中链接...？ – hendos43 2012-02-23 18:29:42

jQuery on CargoCollective过时.hover/.mouseover

回答

相关问题