溢出：隐藏丝毫没有掩饰

Question

<style> 

    .divTable { 
     display: table; 
     float: right; 
     height: 180px; 
     background-color: #0082CA; 
    } 

    .divTableBody { 
     display: table-row-group; 
    } 

    .divTableRow { 
     display: table-row; 
    } 

    .menuLink, .icon { 
     display: table-cell; 
     padding: 10px 10px; 

    } 

    .menuLink { 
     vertical-align: middle; 
     width: 40px; 
     display: none; 
     overflow:hidden;     
     white-space: nowrap; 
    } 

    .menuLink a 
    { 
     font-size:large; 
     text-decoration: none; 
     color: white; 
    } 

    .divTableRow:hover 
    { 
     background-color: red; 
    } 

    .icon 
    { 
     width: 30px; 
    } 

    .icon img 
    { 
     width: 20px; 
     height: 20px; 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
    } 

</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script> 

    $(document).ready(function() 
    { 

     $('.menuLink, .icon') 
      .mouseover(function() { 

       $(".menuLink").stop(true, false).fadeIn(280); 
       $('.menuLink').stop(true, false).animate({ 
        width: "300px", 
        opacity: "1" 
       }); 
      }) 

      .mouseleave(function() { 

       $('.menuLink').stop(true, false).animate({ 
        width: "0px", 
        opacity: "1", 
       }); 

      }); 
    }); 

</script> 

<div class="divTable"> 

    <div class="divTableBody"> 

     <div class="divTableRow"> 
      <div class="menuLink"><a href="http://www.google.com">Link1</a></div> 

      <div class="icon"> 
       <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> 
      </div> 
     </div> 

     <div class="divTableRow"> 
      <div class="menuLink"><a href="http://www.youtube.com">Link2</a></div> 

      <div class="icon"> 
       <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> 
      </div> 
     </div> 

     <div class="divTableRow"> 
      <div class="menuLink"><a href="http://www.youtube.com">Link3</a></div> 

      <div class="icon"> 
       <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> 
      </div> 
     </div> 

     <div class="divTableRow"> 
      <div class="menuLink"><a href="http://www.youtube.com">Link4</a></div> 

      <div class="icon"> 
       <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> 
      </div> 
     </div> 

    </div> 

</div> 

我试图创建鼠标悬停的菜单和使用jQuery鼠标离开。当用户将鼠标悬停在菜单图像上时，它将向左侧水平滑动并显示菜单文本。当鼠标滑过时，菜单文本将滑回并隐藏。

我用过overflow：hidden。但是，我的菜单并未完全隐藏文本，导致初始菜单宽度扩大。任何人都可以向我解释我如何隐藏菜单文本？

谢谢

Answer 1

你正在重写显示：无你的不透明度设置。所以，虽然文本不透明，它会显示。你应该改变：

.mouseleave(function() { 

     $('.menuLink').stop(true, false).animate({ 
      width: "0px", 
      opacity: "1" 
     }); 

    }); 

到：

.mouseleave(function() { 

     $('.menuLink').stop(true, false).animate({ 
      width: "0px", 
      opacity: "0", 
      "padding-left": "0px", 
      "padding-right": "0px" 
     }); 
    }); 

而且改变：

 .mouseover(function() { 

      $(".menuLink").stop(true, false).fadeIn(280); 
      $('.menuLink').stop(true, false).animate({ 
       width: "300px", 
       opacity: "1" 
      }); 
     }) 

到：

 .mouseover(function() { 

      $(".menuLink").stop(true, false).fadeIn(280); 
      $('.menuLink').stop(true, false).animate({ 
       width: "300px", 
       opacity: "1", 
       "padding-left": "10px", 
       "padding-right": "10px" 
      }); 
     }) 

简短说明：

通过将不透明度设置为零，填充保持显示。之前没有显示过填充，因为该项目有显示：无（与不透明：0相反）通过在动画过程中删除和添加填充，现在看起来像预期的那样。