css - 动态图像上的 Css 定位错误

Question

我正在显示来自数据库的动态图像，其中很少有颜色、名称和大小等细节，并在悬停效果上显示边框。

1. 每当我将鼠标悬停在图像上时，其他图像都会向右或向左移动。我希望它们留在原地。
2. 几张照片之间有多余的左侧或右侧空间。

我尝试了很多来解决这些问题，但没有 vain.Plz 的帮助。

php函数中的html代码

<table id='o4_img_w<?php echo $picid  ?>' style="margin-right:10px;margin-bottom: 60px; float: left">
  <tr>
    <td>
      <span style="position: relative;top: -100px" ><?php  echo "$pro_col";   ?></span>
      <span><img  src='images/sales/<?php echo $picname  ?>' style='width: 150px'></span>
      <span style="position: relative;top: 15px;left: -100px" ><?php  echo "$pro_name";   ?></span>
    </td>
  </tr>
</table>

用于悬停效果的php函数中的Javascript：

<script type="text/javascript">

    $(document).ready(function () {

         $("#o4_img_w<?php echo $picid;    ?>").hover(function () {
           $(this).css({
             'border':'solid black 1px',
             'paddingBottom':'30px'
           });

    }, function () {

        $(this).css({
          'border':'none'
        });

    });});

</script

Answer 1

<table id='o4_img_w<?=$picid?>' style="border: solid transparent 1px; margin-right:10px;margin-bottom: 60px; float: left">    
<!-- your table stuff -->

<script type="text/javascript">
    $(document).ready(function () {
         $("#o4_img_w<?=$picid?>").hover(function () {
           $(this).css({
             'border-color':'black',
             'paddingBottom':'30px'
           });

    }, function () {
        $(this).css({
          'border-color': 'transparent'
        });
    });});

</script>

使用transparent或rgba (0,0,0,0)边框颜色隐藏边框。