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

Hover Event for Multiple Paired Navigational Elements

本文关键字：悬停 事件 元素 导航      更新时间：2023-09-26

我正在尝试构建一个登录页面，该页面在两个独立但成对的导航界面中列出一组子页面。

第一个是子页面的文本列表，第二个是子页面的缩略图列表。文本列表的第一项与缩略图列表中的第一个缩略图配对。

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-separ-elements

如何链接两个相同导航栏的悬停效果

jquery-淡入淡出-悬停时-对于多个元素

jquery-hover-dependent-on-two-elements

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

您可以使用 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/

相关文章：