css - 缩略图翻转图像仅出现在屏幕左侧

Question

我正在学习如何使用 Dreamweaver CS6 设计网站。我想制作一个在页面上显示缩略图的照片库，但是当您将鼠标悬停在它们上面时，它会在左侧显示完整尺寸的图像，并在缩略图的下方显示一点。这是我在网上搜索时发现的(可能是在这里找到的，但我不记得是谁发布的，所以如果你发布了它，所有功劳都归于你)。

我在我的 HTML 代码中得到了这个:

   <table>   
   <tr> 
   <td>  
        <a class="thumbnail" href="#thumb">
           <img src="productURL" width="100px" height="142px" border="0" />
           <span>
              <img src="productURL" />
              <br />
              <font face="arial">productname
              </span></a>
           </font>
    </td> 
    <td>  
        <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span>
        <img src="productURL" /><br /><font face="arial">
        productname</span></a></font>
    </td> 
    <td>  
        <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span>
        <img src="productURL" /><br /><font face="arial">
        productname</span></a></font>
    </td> 
    <td> 
        <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span>
        <img src="productURL" /><br /><font face="arial">
        productname</span></a></font>
    </td>  
    </tr>  
    <table>  

然后在我的 CSS 上:

.thumbnail{    
position: relative;    
z-index: 0;    
}

.thumbnail:hover{    
background-color: transparent;    
z-index: 50;    
}

.thumbnail span{     
position: absolute;    
background-color: lightyellow;    
padding: 5px;    
left: 1000px;    
border: 1px dashed gray;    
visibility: hidden;    
color: black;    
text-decoration: none;    
}

.thumbnail span img{     
border-width: 0;    
padding: 2px;    
}

.thumbnail:hover span {    
visibility: visible;    
top: 300px;    
left: 107px;
}

我认为这是一个非常好的代码，但是我不知道如何让图像紧挨着缩略图弹出。我试图创建一个名为“span_2”的“子类”，但结果不正确，弄乱了整个页面。

我认为这是一个大问题，但我需要帮助。这周我开始研究 HTML。

编辑

有什么功能可以让我选择缩略图的位置并将图片设置为紧挨着缩略图显示？

Answer 1

我为您的网站制作了一个有效的新代码:http://jsfiddle.net/sMLbP/4/

有 HTML :

<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>
<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>
<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>
<div class="container_image">
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a>
    <div class="image">
        <img src="productURL" />
        <span style="font-family:arial"> productname</span>
    </div> 
</div>

[更新] 有 CSS:

.container_image {
    float:left;
    position:relative;
    margin-right:20px;
}

.container_image:hover{
    cursor:pointer;
}

.container_image .image {
    position: absolute !important ;
    background-color: lightyellow;
    border: 1px dashed gray;
    top: -1000px !important ;
    z-index:10 !important ;
}

.container_image:hover .image {
    left: 100px !important ; 
    top:0px !important ;
}