如何在悬停效果上组合选择/取消选择鼠标输入事件和显示图像？-解网

问：

如何以列表格式组合选择/取消选择鼠标输入事件和悬停效果上的显示图像？我可以让每个函数独立工作，但不能一起工作。

我正在尝试显示链接列表。当链接悬停在链接上时，将显示图像，所选链接/列表项将为 #000000，取消选择的链接/列表项将变为颜色：#909090。

这是 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>

这是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;
}

和 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>

谢谢！

javascript css 悬停鼠标Enter

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>

上一个：Css 悬停不适用于纵横交错的对象

下一个：如何在子菜单打开时保持悬停处于启用状态

如何在悬停效果上组合选择/取消选择鼠标输入事件和显示图像？

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

评论