鼠标hover父级添加overflow，弹出框被隐藏问题。

程序员文章站 2024-01-29 17:59:52

...

1.老铁碰到问题，发到群里边。类似于二级联动下拉列表，由于需求改变，要求一级下拉列表添加滚动条，乍一听没毛病，一个overflow就解决的问题。然后聊着聊着发现了问题先发下原始图：

效果图如下：

鼠标hover父级添加overflow，弹出框被隐藏问题。

html代码：

鼠标hover父级添加overflow，弹出框被隐藏问题。

主要问题：

给父元素添加overflow：scroll，子元素的弹出框会受影响。
效果做完之后滚动条会影响效果，鼠标在经过滚动条移动到右侧弹出框，弹出框直接消失。

各种百度发现overflow影响的是：添加overflow的元素，该元素的后代元素，以及所有相对于该元素和后代元素定位的元素。有点绕鼠标hover父级添加overflow，弹出框被隐藏问题。。所以改变思路，让弹出框相对于添加overflow元素的父级定位于是overflow隐藏效果消失，滚动条和弹出框同时显示，但是又出现一个问题弹出框的定位问题：

鼠标hover父级添加overflow，弹出框被隐藏问题。

所有弹出框全部跑到左上方，由于之前相对于li定位，设置的事top：0，right：100%，现在改变了top不能全部为0.决定用js辅助解决：

<script>
 $(".list>li").hover(function(){
     $(this).find(".test").css({
         "top":$(this).position().top//获取到当前li距离ul的距离 给弹出框赋值
     })
 })
</script>

然后问题基本解决，只是有一点经过滚动条的时候弹出框消失。这个问题研究半天没有结局，最后简单粗暴地将滚动条移动到右侧，弹出框放到左侧。避免在一个方向，也算是解决了。贴上全部代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8">
 <title>test</title>
 <style>
  ul,li{
   list-style: none;
   margin:0;
   padding: 0;
  }
  .parent{
   text-align: center;
  }
   .d1{
    width:500px;
    height:500px;
    display: inline-block;
    margin:200px auto;
    position: relative;
   }
  .list{
   height:100%;
   overflow-y: scroll;
   overflow-x: visible;
  }
  .list>li{
   height:100px;
   background:#ddd;
   margin-top:10px;
  }
   .list>li:hover .test{
    display: block;
   }
  .test{
   position: absolute;
   left:100%;
   width:300px;
   background:yellow;
   display: none;
  }
   .test li{

   }
 </style>
 <script language="JavaScript" type="text/javascript"> 
   
   
  var idTmr; 
 //��ȡ��ǰ��������� 
  function getExplorer() { 
   var explorer = window.navigator.userAgent ; 
   //ie 
   if (explorer.indexOf("MSIE") >= 0) { 
    return 'ie'; 
   } 
   //firefox 
   else if (explorer.indexOf("Firefox") >= 0) { 
    return 'Firefox'; 
   } 
   //Chrome 
   else if(explorer.indexOf("Chrome") >= 0){ 
    return 'Chrome'; 
   } 
   //Opera 
   else if(explorer.indexOf("Opera") >= 0){ 
    return 'Opera'; 
   } 
   //Safari 
   else if(explorer.indexOf("Safari") >= 0){ 
    return 'Safari'; 
   } 
  } 
    
 //��ȡ��������Ҫ�жϵ�ǰ�������Ҫ���õķ�����Ŀǰ��Ŀ�л�����ȸ裬360û������ 
  //win10�Դ���IE�޷����� 
  function exportExcel(tableid) { 
   if(getExplorer()=='ie') 
   { 
    var curTbl = document.getElementById(tableid); 
    var oXL = new ActiveXObject("Excel.Application"); 
    var oWB = oXL.Workbooks.Add(); 
    var xlsheet = oWB.Worksheets(1); 
    var sel = document.body.createTextRange(); 
    sel.moveToElementText(curTbl); 
    sel.select(); 
    sel.execCommand("Copy"); 
    xlsheet.Paste(); 
    oXL.Visible = true; 
  
    try { 
     var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); 
    } catch (e) { 
     print("Nested catch caught " + e); 
    } finally { 
     oWB.SaveAs(fname); 
     oWB.Close(savechanges = false); 
     oXL.Quit(); 
     oXL = null; 
     idTmr = window.setInterval("Cleanup();", 1); 
    } 
  
   } 
   else 
   { 
    tableToExcel(tableid) 
   } 
  } 
  function Cleanup() { 
   window.clearInterval(idTmr); 
   CollectGarbage(); 
  } 
    
 //�ж����������õķ�������table��id���뼴�� 
  var tableToExcel = (function() { 
   var uri = 'data:application/vnd.ms-excel;base64,', 
     template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>', 
     base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, 
     format = function(s, c) { 
      return s.replace(/{(\w+)}/g, 
        function(m, p) { return c[p]; }) } 
   return function(table, name) { 
    if (!table.nodeType) table = document.getElementById(table) 
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} 
    window.location.href = uri + base64(format(template, ctx)) 
   } 
  })() 
  
 </script> 
</head> 
<body> 
  <div class="parent">
   <div class="d1">
    <ul class="list">
     <li>
      测试弹框1
      <ul class="test">
       <li>测试弹框一层</li>
       <li>测试弹框二层</li>
       <li>测试弹框三层</li>
      </ul>
     </li>
     <li>
      测试弹框2
      <ul class="test">
       <li>测试弹框一层</li>
       <li>测试弹框二层</li>
       <li>测试弹框三层</li>
      </ul>
     </li>
     <li>
      测试弹框3
      <ul class="test">
       <li>测试弹框一层</li>
       <li>测试弹框二层</li>
       <li>测试弹框三层</li>
      </ul>
     </li>
     <li>
      测试弹框3
      <ul class="test">
       <li>测试弹框一层</li>
       <li>测试弹框二层</li>
       <li>测试弹框三层</li>
      </ul>
     </li>
     <li>
      测试弹框3
      <ul class="test">
       <li>测试弹框一层</li>
       <li>测试弹框二层</li>
       <li>测试弹框三层</li>
      </ul>
     </li>
     <li>
      测试弹框3
      <ul class="test">
       <li>测试弹框一层</li>
       <li>测试弹框二层</li>
       <li>测试弹框三层</li>
      </ul>
     </li>
    </ul>
   </div>
  </div>
</body>
<script src="jquery.min.js"></script>
<script>
 $(".list>li").hover(function(){
     $(this).find(".test").css({
         "top":$(this).position().top
     })
 })
</script>
</html>

最后友情广告，老铁博客：http://my.csdn.net/caolonggang 一手vue非常6。