How can I combine select/deselect mouseenter event & display image on hover effects?

Question

How can I combine select/deselect mouseenter event & display image on hover effects in a list format? I can get each function work independently, but not together.

I'm trying to display a list of links. When a link is hovered over, an image will display, the selected link/list item will be #000000, and the deselected links/list items will turn color: #909090.

Here is the Javascript:

<script>
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();
    }
});
});
</script>

Here is the 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;
}

and the 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>

Thank you!

Answer 1

Try this I added css a:hover, Now it is working

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();
    }
});
});

  /*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;
               flex
               text-align-last: center;
    }

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

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

  <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>
</ul>


</body>
</html>