如何在列表中结合mouseenter选中/取消选中事件与悬停显示图片效果

需要实现列表的两个交互效果：

• 鼠标悬停在链接上时，显示对应图片
• 悬停时，当前链接颜色为#000000，其余未悬停的链接颜色变为#909090

目前两个功能单独运行正常，但无法同时生效，以下是现有代码：

现有代码 #

HTML #

<ul class="col-wrap">
     <li><span class="hiddentxt"><a href="#">List Item #1</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Alice_%28apple%29.jpg/180px-Alice_%28apple%29.jpg" width="800" /></span></li>
     <li><span class="hiddentxt"><a href="#">List Item #2</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Alice_%28apple%29.jpg/180px-Alice_%28apple%29.jpg" width="800" /></span></li>
     <li><span class="hiddentxt"><a href="#">List Item #3</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Alice_%28apple%29.jpg/180px-Alice_%28apple%29.jpg" width="800" /></span></li>
</ul>

CSS #

/*FUNCTIONALITY: Display image on hover*/
.hiddenimg {
    display: none;
  }
  
.hiddentxt {
    z-index:99;
}      
.hiddentxt a {
    z-index: 99;
}    
  
.hiddentxt:hover ~ .hiddenimg {
    display: block;
    position: absolute;
    inset:0px;
    z-index: 2;
}

/*Column Styling*/
.col-wrap {
     list-style-type: none;
     list-style-position: outside;
     column-count: 2;
}
.col-wrap li {
       font-style: normal; 
       font-weight: 500; 
       font-size: 36px; 
       line-height: 120%; 
       display: flex;
       text-align-last: center;
}

.col-wrap .hiddentxt li.de-select a{
    color: #909090;
}

JavaScript #

jQuery(document).ready(function() {
    $('.header--plusIcon').css("display", "none");

    if($(window).width() > 1200){
        $('.col-wrap .hiddentxt li a').on('mouseenter ', 
            function(ev){
                $(this).parent().siblings().addClass('de-select');
        });
       $('.col-wrap .hiddentxt li a').on('mouseleave ', 
          function(ev){        
             $(this).parent().siblings().removeClass('de-select');
          });
    }

    $('.borderBtmHalf .overlayButtonBottomBar').each(function(){
        if(!$(this).find('.common-btn ').length){
            $(this).hide();
        }
    });
});

问题分析与修复方案 #

两个功能冲突的核心原因是选择器匹配错误、类操作目标错误，修改后即可同时生效：

修改后的完整代码 #

HTML（结构无需改动）

<ul class="col-wrap">
     <li><span class="hiddentxt"><a href="#">List Item #1</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Alice_%28apple%29.jpg/180px-Alice_%28apple%29.jpg" width="800" /></span></li>
     <li><span class="hiddentxt"><a href="#">List Item #2</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Alice_%28apple%29.jpg/180px-Alice_%28apple%29.jpg" width="800" /></span></li>
     <li><span class="hiddentxt"><a href="#">List Item #3</a></span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Alice_%28apple%29.jpg/180px-Alice_%28apple%29.jpg" width="800" /></span></li>
</ul>

CSS

/*FUNCTIONALITY: Display image on hover*/
.hiddenimg {
    display: none;
  }
  
.hiddentxt {
    z-index:99;
}      
.hiddentxt a {
    z-index: 99;
    color: #000000; /* 默认设置黑色，确保未悬停时的初始状态 */
}    
  
.hiddentxt:hover ~ .hiddenimg {
    display: block;
    position: absolute;
    inset:0px;
    z-index: 2;
}

/*Column Styling*/
.col-wrap {
     list-style-type: none;
     list-style-position: outside;
     column-count: 2;
     position: relative; /* 给父容器加相对定位，让绝对定位的图片基于容器布局 */
}
.col-wrap li {
       font-style: normal; 
       font-weight: 500; 
       font-size: 36px; 
       line-height: 120%; 
       display: flex;
       text-align-last: center;
}

/* 修正选择器，正确匹配未选中的列表项内的链接 */
.col-wrap li.de-select .hiddentxt a{
    color: #909090;
}

JavaScript

jQuery(document).ready(function() {
    $('.header--plusIcon').css("display", "none");

    if($(window).width() > 1200){
        // 修正选择器，匹配列表项内的链接元素
        $('.col-wrap li .hiddentxt a').on('mouseenter', function(ev){
            // 获取当前链接所在的列表项，给所有兄弟列表项添加灰色类
            $(this).closest('li').siblings().addClass('de-select');
        });
        $('.col-wrap li .hiddentxt a').on('mouseleave', function(ev){        
            // 移除所有兄弟列表项的灰色类
            $(this).closest('li').siblings().removeClass('de-select');
        });
    }

    $('.borderBtmHalf .overlayButtonBottomBar').each(function(){
        if(!$(this).find('.common-btn').length){
            $(this).hide();
        }
    });
});

关键修改点 #

1. JS选择器修正：原选择器.col-wrap .hiddentxt li a不符合HTML结构，改为.col-wrap li .hiddentxt a正确绑定目标元素
2. 类操作目标修正：改为操作当前链接所在列表项的兄弟项，而非错误的父元素兄弟
3. CSS选择器修正：调整未选中状态的样式选择器，确保样式正确应用
4. 布局优化：给.col-wrap添加相对定位，避免绝对定位的图片脱离容器范围

内容的提问来源于stack exchange，提问作者specialtygirl