觸發鼠標懸停一個「更多信息」格（具有交疊）

Question

這就是我想實現當鼠標光標在圖像效果：

這是到目前爲止我的方法：

<div id="moviethumb2" class="moviethumb"> 
    <a onmouseover="javascript:mouseOverThumb(2)" href="movie.php?id=38055"> 
      <img src="img2.jpg"> 
    </a> 
</div> 
<div id="moviethumb3" class="moviethumb">     
    <a onmouseover="javascript:mouseOverThumb(3)" href="movie.php?id=605"> 
      <img src="img3.jpg"> 
    </a> 
</div> 

但我還沒有能夠想出一個非常簡單的方法。 z-index我試過使用。

我的問題是，使用css，jquery/javascript實現上述效果的最簡單方法是什麼？我會很高興在正確的方向指針，所以我不會過度複雜這個問題。

謝謝

Answer 1

一個經典，但很好的例子，你正在尋找什麼。

教程 http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

演示 http://www.sohtanaka.com/web-design/examples/image-zoom/

Answer 2

也許最簡單的方法就是使用jQuery，作爲Loktar建議。

如果你真的想自己做，但是： 添加一個新的div具有特定寬度，位置彈出：絕對和顯示：無。現在，當鼠標懸停在其中一個拇指上時，使用javascript將顯示設置爲「block」，將位置設置爲拇指位置減去邊框寬度/高度。 （你可以通過給它一個類似於你通過mouseOverThumb傳遞的數字的id來獲得拇指的位置，然後執行getElementById並讀取頂部和左側屬性）。使用onMouseOut將彈出窗口的顯示設置爲'none'。

現在，而不是亂搞z-index，只需將相關的拇指和附加信息放入使用javascript的彈出窗口中即可。

這是我現在可以想到的最簡單的方法。