2

我有一个关于溢出的 div 的问题：隐藏。它是相对定位的，它的子 div 是绝对定位的。悬停时，父 div 从溢出：隐藏变为溢出：可见。这使子 div 能够正确显示。

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

在此处输入图像描述

有没有其他人遇到过这个？我有点卡在这个...

更新：我对这个问题做了一个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>
4

2 回答 2

1

似乎overflow:hidden在超链接中添加的额外内容可以解决该问题。在这个小提琴中检查一下。

于 2013-01-24T15:28:26.730 回答
-1

这看起来像是渲染中的一个错误，而不是为什么它会这样工作。开发人员工具显示它就像鼠标仍然悬停在元素上方。可能有一些元素变得宽/高并且鼠标移出事件不会发生。但是，如果您删除position:relative;，position:absolute;并将 top/left 替换为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-24T15:29:10.963 回答