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>

棘手的部分（对我而言）配对元素应该具有相关的悬停样式更改。例如，当访问者悬停在导航项目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类来模仿：悬停状态 http://jsfiddle.net/Rfrxg/4/

多个配对导航元素的悬停事件

1 个答案: