1
我想爲圖庫做懸停圖像。當用戶將鼠標懸停在圖像上時，它會在頁面中間以固定位置彈出，但現有圖像（縮略圖）仍保持原位。懸停圖像顯示在頁面中間和縮略圖停留
但是，不知道我做錯了懸停圖像在圖像本身，而不是主頁。
我隱藏了另一張爲主頁面彈出的圖像，因此頁面中的縮略圖將保持原樣。但是，此圖像正在縮略圖中盤旋。
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
/*20 for 5 box , 25 for 4 box*/
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
/*border width control*/
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
/*This hover is for small image*/
.thumbnail:hover img{
border: 1px solid transparent;
}
/*This hide the image that is in the span*/
.thumbnail span{
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width:200%; /* you can use % */
height: auto;
padding: 2px;
}
/*When mouse over, the hidden image apear*/
.thumbnail:hover span{
position:absolute;
visibility: visible;
top: 0;
left: 0;
z-index: 200;
}
變化'位置：絕對;''到的位置是：固定的;'上.thumbnail懸停狀態。 – Fergoso 2014-09-25 03:26:15