多個配對導航元素的懸停事件

Question

我正在嘗試構建一個登錄頁面，該頁面在兩個單獨但已配對的導航界面中列出了一組子頁面。

第一個是子頁面的文本列表，第二個是子頁面的縮略圖列表。 文本列表的第一項與縮略圖列表中的第一個縮略圖配對。

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>

棘手的部分（對我而言）是配對的元素應具有相關的懸停樣式更改。 例如，當訪客將鼠標懸停在導航項目2上時，該文本列表項的樣式將更改（簡單的文本修飾更改），並且配對縮略圖上的樣式將更改（不透明度將從0.5更改為1）。 另外：如果用戶將鼠標懸停在NavImage2上，則樣式將同時在圖像（不透明度）和已配對的文本列表項（文本裝飾）上更改。

我已經按照當前的編碼方式創建了FIDDLE （懸停事件可以單獨工作，但不會以任何方式配對）-如果沒有其他內容，則可以提供一個直觀的示例。

我能想到的唯一另一個問題是，導航列表（文本和圖像）是動態創建的，因此我無法對（當前）八個導航項（因為可能是10個或20個等）。

作為參考，這是我探索過的其他一些解決方案：

jQuery懸停在兩個單獨的元素上

如何鏈接兩個相同的導航欄的懸停效果

jQuery淡入淡出懸停了多個元素

jQuery懸停依賴於兩個元素

在懸停事件上顯示的jQuery非嵌套非后代同級導航

Answer 1

您可以使用jquery在第二個導航上向具有相同ID的元素添加“懸停”類，如下所示
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/