想实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果

Question

我想实现的效果如上，类似http://www.lao88.cn/index.php这个网站下中间那块的效果，附上一张图然后我自己试着找了个，但是只是用css完成的，而且效果也不太好，就是下面两张图的效果
代码如下：<style type="text/css">     /*Tooltips*/     .tooltips{ display:block;position:relative; /*这个是关键*/ z-index:2; }      .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ }      .tooltips span{ display: none; }      .tooltips:hover span{     /*span 标签仅在 :hover 状态时显示*/     display:block;      position:absolute;      top:0px;      left:0px;      width:220px;      height:335px;     border:1px solid #999999;      background-color:#FFFFFF;          padding: 3px;      color:black;  </style>
<a class="tooltips" href="#tooltips">     <img src="images/1.jpg" width="100" height="100" style="border: 0" alt="" />     <span>         <table>                     <tr>                       <td>                          <img src="1.jpg" style="border: 0" width="212" height="212"                                                                        alt="" />                        </td>                     </tr>             <tr>             <td>                     name                                     </td>             </tr>         </table>     </span> </a>
总共有三行数据，但是第二行、第三行和靠边的，弹出的层就超出了这个范围，谁有类似的js，或者是在这个基础上怎么改，能改成和那个网站一样的效果？

Answer 1

看下面的这个吧，上面的代码没弄好：
<style type="text/css">
    /*Tooltips*/ 
    .tooltips{ display:block;position:relative; /*这个是关键*/ z-index:2; } 
    .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } 
    .tooltips span{ display: none; } 
    .tooltips:hover span{
    /*span 标签仅在 :hover 状态时显示*/ 
    display:block; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:220px; 
    height:335px;
    border:1px solid #999999; 
    background-color:#FFFFFF;     
    padding: 3px; 
    color:black; 
</style>
<a class="tooltips" href="#tooltips">
<img src="images/1.jpg" width="100" height="100" style="border: 0" alt="" />
<span>
   <table>
      <tr>
         <td>
             <img src="1.jpg" style="border: 0" width="212" height="212" alt="" />
         </td>
      </tr>
      <tr>
<td>
   name
        </td>
      </tr>
   </table>
</span>
</a>总共有三行数据，但是第二行、第三行和靠边的，弹出的层就超出了这个范围，谁有类似的js，或者是在这个基础上怎么改，能改成和那个网站一样的效果？ 

Answer 2

举例+详细代码：http://blog.csdn.net/joyhen/article/details/8812186

Answer 3

我看了你给的那个例子，但是少了个js，所以没能看到最终效果，能把那个js发给我吗？谢谢！

Answer 4

我看了你给的那个例子，但是少了个js，所以没能看到最终效果，能把那个js发给我吗？谢谢！
那个就是jquery库啊

Answer 5

给你个思路  1.首先把样式写出来。  2.绑定图片的时候 给每个图片绑定一个onmouseover事件
和一个onmouseout事件，onmouseover这个事件里面带有一个参数id 也就是每一个图片所关联的比如这个产品的id,然后利用ajax查询出这个产品的所有参数，在显示层中显示，onmouseout事件就是控制让显示层隐藏。3.利用我给你的想法,就可以自己动手 丰衣足食