Событие Hover для нескольких парных навигационных элементов

Question

Я пытаюсь создать целевую страницу, в которой перечисляется набор подстраниц в двух отдельных, но PAIRED навигационных интерфейсах.

Первый - это текстовый список подстраниц, второй - список миниатюр подстраниц. Первый элемент текстового списка соединен с первым миниатюр из списка миниатюр.

HTML, выглядит примерно так:

<div class="wrapper"> 
    <ul class="nav-list"> 
     <li><a href="link">Nav Item 1</a></li> 
     <li><a href="link">Nav Item 2</a></li> 
     <li><a href="link">Nav Item 3</a></li> 
     <li><a href="link">Nav Item 4</a></li> 
     <li><a href="link">Nav Item 5</a></li> 
     <li><a href="link">Nav Item 6</a></li> 
     <li><a href="link">Nav Item 7</a></li> 
     <li><a href="link">Nav Item 8</a></li> 
    </ul>    
<div class="nav-thumb"> 
    <a href="link"><img width="150" height="80" src="navimage1.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage2.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage3.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage4.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage5.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage6.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage7.jpg" /></a> 
    <a href="link"><img width="150" height="80" src="navimage8.jpg" /></a> 
</div> 
</div> 

хитрая часть (для меня) в том, что парные элементы должны быть связаны изменения парения стиля. Например, когда посетитель наводит курсор на элемент Nav Item 2, стили будут меняться для этого элемента текстового списка (простое изменение текста) И стиль изменится на парное изображение миниатюр (непрозрачность изменится с 0,5 на 1). Кроме того: если пользователь наводится на NavImage2, стили будут меняться как на изображении (непрозрачность), так и на парном текстовом списке (текстовое оформление).

Я создал FIDDLE с кодировкой, поскольку у меня есть это (события наведения работают отдельно, но не сопряжены каким-либо образом), чтобы обеспечить визуальный пример, если ничего другого.

Единственная проблема, о которой я могу думать, заключается в том, что навигационные списки (как текст, так и изображения) создаются динамически, поэтому я не могу жестко скопировать определенные сценарии для (в настоящее время) восьми навигационных элементов (так как это может быть 10 или 20 и т. д. в будущем).

Для справки, вот несколько других решений, я исследовал:

jquery-hover-on-two-separate-elements

how-to-link-the-hover-effects-of-two-identical-nav-bars

jquery-fade-in-fade-out-on-hover-for-multiple-elements

jquery-hover-dependent-on-two-elements

jquery-non-nested-non-descendant-sibling-navigation-shown-on-hover-event

Answer 1

вы можете использовать JQuery, чтобы добавить класс «парить» к элементу с тем же идентификатором на второй навигации как этот
JS

//add .data("pair") to each element in both navigations with the index value 
$(".nav-list a").each(function(i,n){ 
    $(this).data("pair",i);  
}); 
$(".nav-thumb img").each(function(i,n){ 
    $(this).data("pair",i);  
}); 
//index var to use the same data in mouseover and mouseout 
var index; 
$(".nav-list a").mouseover(function() { 
    index=$(this).data("pair"); 
//select the element assuming both navigations have the same amount of elements 
    $(".nav-thumb img").eq(index).addClass("hover");//add class hover 
}).mouseout(function() { 
    $(".nav-thumb img").eq(index).removeClass("hover");//remove class hover 
}); 
//the same for the second navigation 
$(".nav-thumb img").mouseover(function() { 
    index=$(this).data("pair"); 
    $(".nav-list a").eq(index).addClass("hover"); 
}).mouseout(function() { 
    $(".nav-list a").eq(index).removeClass("hover"); 
});  

CSS

.nav-list a:hover,.nav-list a.hover { color: #03c; text-decoration: none; } 
.wrapper img:hover,.wrapper img.hover { opacity: 1;}  

вам нужно изменить эти классы, чтобы вы могли подражать состоянию: hover с классом .hover
http://jsfiddle.net/Rfrxg/4/