jQuery on CargoCollective устаревший .hover/.mouseover

Question

Создание сайта на CargoCollective, но, похоже, они используют jQuery 1.4.2, который, похоже, не имеет необходимой мне функциональности.

Итак, результат я и добиваюсь это: http://jsfiddle.net/hendos43/a3hFh/1/

В случае, если вы не можете видеть, что по какой-то причине, это так, если вы можете, не пропустить, пока после кода:

Цель:

Галерея фотографий сотрудников, которые, при наведении указателя мыши над покажет био (индивидуальный ДИВ), который не исчезнет onmouseOut (когда мышь останавливается парит над изображением), но будет оставаться там до другого изображения зависало, вызывая следующее событие mouseover.

Код я использовал это:

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 К счастью, это, похоже, не работает, по-видимому, потому что в работе jQuery в этой функции в 1.4.4 произошли некоторые изменения, а для грузовиков используется 1.4.2?

Использование тестовых параметров в jsFiddle, оно работает в 1.4.4, но не в 1.4.2, а соединение 1.7 в пользовательском разделе HTML, похоже, разбивает остальную часть сайта и делает эту функцию работать, но в любом случае, divs игнорируют их позиционирование в стиле CSS. Также попробовали. С теми же эффектами.

У любого человека есть какие-либо решения, пожалуйста?

(Пожалуйста, обратите внимание, что изображения одинаковы, это наглядно).

Answer 1

Вместо использования data вы можете использовать rel

Demo работает на 1.3.2