尽管溢出，部分内容仍然可见：隐藏

我有一个关于带溢出div的问题：隐藏。它是相对定位的，它的子div是绝对定位的。悬停时，父div从溢出：隐藏溢出：可见。这使得子div能够正确显示。尽管溢出，部分内容仍然可见：隐藏

问题：虽然其他一切工作都很好，但当鼠标不在父div上时（因此溢出现在再次隐藏），子div的位仍然显示在它们的位置。它们并没有实际显示，因为如果我选择一些文本或对象附近完全消失。就好像页面需要某种“刷新”一样。

enter image description here

有其他人来翻过这一点？我是一种停留在这...

更新：我做了一个jsfiddle这个问题，并意识到它只是存在的基于WebKit浏览器（Chrome和Safari）。我仍然不知道为什么，虽然...

<div class="list-name"> 
    <ul> 
     <li class="truncated"> 
      <a href=""> 
       Hover me to see all the magic thext I'm hidding 
      </a> 
     </li> 
    </ul> 
</div>

来源

2013-01-24 radu.luchian

提供的jsfiddle，它将帮助别人迅速回答。例如 - http://jsfiddle.net/L8H9J/2/ – GLES

也许我误读了，但是你不想使用display：none或visibility：hidden而不是overflow：隐藏如果你想完全隐藏元素？ – estrar

@estrar我不想完全隐藏子元素，我只想展示它的一部分，并在悬停时显示整个事物。 –

这似乎是一个额外的overflow:hidden加入超链接来解决问题。在this fiddle检查出来。

来源

2013-01-24 15:28:26

这看起来像是渲染中的一个错误，而不是它为什么如此工作。开发人员工具显示它像鼠标仍然悬停在元素上方。可能有一些元素变得越来越宽泛，高级鼠标事件也不会发生。但是，如果你删除position:relative;，position:absolute;并更换上/左与margin-top/margin-left - 一切正常，对我很好：

http://jsfiddle.net/Nt5bN/13/

CSS：

.list-name ul { 
    margin: 50px; 
    padding: 0; 
    list-style: none; 
} 

.list-name li { 
    display: block; 
    float: left; 
    width: 60px; 
    height: 29px; 
    overflow: hidden; 
    background: #eee; 
} 

.list-name a { 
    width: 300px; 
    display: block; 
    float: left; 
} 

.list-name li.truncated:hover { 
    overflow: visible; 
} 

.list-name li.truncated:hover a { 

    margin-top: -3px; 
    margin-left: -8px; 
    background: #fff; 
    z-index: 9999; 
    padding: 2px 0 2px 7px; 
    border-radius: 3px; 
    border: 1px solid #ddd; 
}

来源

2013-01-24 15:29:10

尽管溢出，部分内容仍然可见：隐藏

回答

相关问题