懸停拇指css中的中央圖像

Question

我想讓圖像在屏幕中央彈出，當我將鼠標懸停在拇指上時。我有多個大拇指和我都希望他們能夠顯示一個div（包括文本和圖像），就在屏幕的中心，獨立於屏幕分辨率等等，等等

<a href="#thumb"><img src="img/thump_5.png" width="150px" border="0" /><span><b>some info and image 1</b><br><img src="img/5.png" width="510" height="335" /></span></a> 
<br> 
<a href="#thumb"><img src="img/thump_2.png" width="150px" border="0" /><span><b>some info and image 2</b><br><img src="img/2.png" width="510" height="335" /></span></a> 
<br> 
<a href="#thumb"><img src="img/thump_3.png" width="150px" border="0" /><span><b>some info and image 3</b><br><img src="img/3.png" width="510" height="335" /></span></a> 
<br> 
<a href="#thumb"><img src="img/thump_4.png" width="150px" border="0" /><span><b>some info and image 4</b><br><img src="img/4.png" width="510" height="335" /></span></a> 
<br> 
<a href="#thumb"><img src="img/thump_1.png" width="150px" border="0" /><span><b>some info and image 5</b><br><img src="img/1.png" width="510" height="335" /></span></a> 

我碰到了這個問題， ：Using jQuery to center a DIV on the screen

但我不知道如何在我的html代碼中實現這一點。 任何人都可以幫助我與css/jquery使它工作。 問候，

Matthijs

Answer 1

這可能正是你正在尋找：

• http://jmar.github.com/jquery-hoverZoom/

這些不完全圍繞一個div在屏幕的中間，但他們看起來也不錯;）

• http://cssglobe.com/lab/tooltip/02/
• http://james.padolsey.com/demos/imgPreview/full/
• http://home.comcast.net/~littlemoe85/thumbhover/index.html

Answer 2

沒有任何代碼就很難給你一個個人全能的答案，但在CSS方面，當你有定義了一個div的width和height屬性一些具體的值（不auto），然後做position:relative; margin: auto;，那麼div應該集中在它的父代中。如果你想得到更廣泛的答案，請做一些你已經擁有的東西。