マウスのポップアップ情報ウィンドウ

Question

マウスの上にポップアップウィンドウを実装して、そのエントリに関するすべての情報を表示する基本サムネイルを表示したいとします。

以下は、私はマウスがソフトウェア名のいずれかの上に置いたときに表示したいサムネイルウィンドウです：

以下は私のインデックス図です。

感謝しているすべてのヘルプは、事前にあなたに感謝します！

Answer 1

と仮定すると、ポップアップがあなたの "説明ボックス" のIDです：

HTML

<div id="parent"> 
This is the main container. 
<div id="popup" style="display: none">some text here</div> 
</div> 

はJavaScript

var e = document.getElementById('parent'); 
e.onmouseover = function() { 
    document.getElementById('popup').style.display = 'block'; 
} 
e.onmouseout = function() { 
    document.getElementById('popup').style.display = 'none'; 
} 

またあなたはJavaScriptを完全に取り除くことができ、ちょうどCSSでそれをしなさい：

CSS

.parent .popup { 
    display: none; 
} 

.parent:hover .popup { 
    display: block; 
} 

Answer 2

あなたができることは、すべての<tr> </tr>をJQueryで繰り返し、サムネイルを追加するhtml要素を追加することです。何かのように：

ご覧のとおり、マウスの近くに表示するには、拡張されたdivにいくつかのCSSを適用します。