如何组合选择/取消选择 mouseenter 事件并在悬停效果上显示图像？

问题描述 投票：0回答：1

如何组合选择/取消选择 mouseenter 事件并以列表格式在悬停效果上显示图像？我可以让每个功能独立工作，但不能一起工作。

我正在尝试显示链接列表。当鼠标悬停在链接上时，将显示图像，取消选择的链接将变成颜色：#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>
</ul>

谢谢！

javascript css hover mouseenter
1个回答
0
投票

试试这个 我添加了 css a:hover，现在它可以工作了

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.