Question

我正在显示数据库中的动态图像，其中包含颜色，名称和大小等细节，并显示悬停效果的边框。

每当我将鼠标悬停在图像上时，其他图像向右或向左移动。我希望它们留在那里，它们在哪里。
在少数照片中有不需要的左右空间。

我努力解决这些问题，但没有任何徒劳.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) border-color隐藏边框。

动态图像上的Css位置错误

1 个答案: