多对导航元素的悬停事件

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-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 在第二次导航中向具有相同 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/