儘管溢出，部分內容仍然可見：隱藏

我有一個關於帶溢出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

儘管溢出，部分內容仍然可見：隱藏

回答

相關問題