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

回答

相關問題