爲什麼我的圖像與我的其他圖像不匹配HTML

Question

我試圖在我現有的圖像標籤上懸停時，在現有圖像上顯示另一圖像。但是，當我嘗試將鼠標懸停在現有圖像上時，第二張圖像看起來並未在第一張圖像上對齊。它看起來像這樣：

如何獲得第二圖像在我的第一個圖片對齊？這是我當前的代碼：

<td style="vertical-align:middle;"> 
    <a href="#" class="gallerypic" style="border-color:Black;border:0;"> 
    <span class="hoverclose"> 
     <img src="images/SampleLogo.jpg" width="150" height="150" /> 
    <span> 
    <img id="imageID" src="" width="150" height="150" border="1" style="border-color:Black;"/> 
    </a> 
</td> 

CSS：

<style type="text/css"> 
     a.gallerypic{ 
      width:140px; 
      text-decoration:none; 
      position:relative; 
      display:block; 
      border:1px solid #040404; 
      padding:3px; 
      margin-right:5px; 
      float:left; 
     } 

     a.gallerypic span.hoverclose{ 
      visibility:hidden; 
      position:absolute; 
      left:40%; 
      top:35%; 
      filter:alpha(opacity=50); 
      -moz-opacity:0.5; 
      -khtml-opacity: 0.5; 
      opacity: 0.5; 
     } 

     a.gallerypic:hover span.hoverclose{ 
      visibility:visible; 
     } 
    </style> 

預先感謝您的幫助！

Answer 1

span絕對根據父母<a>標籤定位。由於該<a>有填充和邊框，因此需要將span的頂部和左側值設置爲4px，而不是您在那裏的百分比值。

或者，您可以將它們設置爲0並使用邊距。

a.gallerypic span.hoverclose { 
    visibility:hidden; 
    position:absolute; 
    left:4px; /* 3px padding + 1px border */ 
    top:4px; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

Demo

Answer 2

使用這個類

 a.gallerypic span.hoverclose{ 
      visibility:hidden; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
      filter:alpha(opacity=50); 
      -moz-opacity:0.5; 
      -khtml-opacity: 0.5; 
      opacity: 0.5; 
     } 

這裏是演示 Working Fiddle

Answer 3

您在left: 40%; top: 35%;變化這兩個值的圖像定位到0

DEMO

a.gallerypic span.hoverclose{ 
     visibility:hidden; 
     position:absolute; 
     left:0; 
     top:0; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
    }