懸停IMG顯示絕對定位的div不起作用

我試圖顯示絕對定位的div #menu，默認狀態top: -9999px; left: -9999px用戶將鼠標懸停在圖像上（因此它應該像top: 100px; left: 20px）。懸停IMG顯示絕對定位的div不起作用

但它不適合我這種方式。

在我的jsfiddle看看，也許有一些錯誤：

這裏是我的CSS：

#menu{ 
height: 350px; 
width: 280px; 
position: absolute; 
left: -9999px; 
top: -9999px; 
background-color: lightblue; 
}

Here is my Fiddle

我怎麼能解決這個問題？

來源

2014-04-02 Václav Zeman

爲什麼保留：-9999px; top：-9999px; ?? – Andynedine

因爲它應該被隱藏。我可能使用不透明度：0和懸停不透明度：1. –

這裏是東西，這將幫助你得到你所需要的：

DIV

<div class="menu"> 
    hi 
</div>

CSS

.menu { 
    margin: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: #06F; 
    color: #fff; 
    position: absolute; 
    left: 10px; 
    top: 0; 
    } 

.menu:hover { 
    position: absolute; 
    left: 0; 
    top: 0; 
}

DEMO

來源

2014-04-02 06:02:31 Gadgetster

謝謝。但我不能讓它與另一個div徘徊。看看這裏-http：//jsfiddle.net/7aPvS/5/。 –

http://jsfiddle.net/7aPvS/7/ – Gadgetster

好的，我找到了解決方案。在img:hover + #menu必須有一個加號。我用opacity而不是-9999px。

#menu{ 
    height: 350px; 
    width: 280px; 
    position: absolute; 
    z-index: 999; 
    left: 200px; 
    top: 100px; 
    background-color: lightblue; 
    opacity: 0; 
} 

#img{ 
    height: 300px; 
    width: 300px; 
} 
#img:hover + #menu{ 
    opacity: 1;  
}

來源

2014-04-02 06:12:33

不透明度仍將佔用顯示空間：none;會更好 – Gadgetster

好的，謝謝你的建議。 –

懸停IMG顯示絕對定位的div不起作用

回答

相關問題