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

Question

我有一个关于溢出div的问题：隐藏。它位于相对位置，它的子div位于绝对位置。在悬停时，父div从溢出：隐藏变为溢出：可见。这使得子div可以正常显示。

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

还有其他人来过这个吗？我有点坚持这个......

更新：我针对此问题制作了一个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>

Answer 1

似乎添加到超链接的额外overflow:hidden解决了问题。请在this fiddle中查看。

Answer 2

这看起来像渲染中的错误，而不是它为什么这样工作。开发人员工具显示它像鼠标仍悬停在元素上方。可能有一些元素变得宽/高并且鼠标输出事件不会发生。但是，如果您移除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;
}