0

色、名前、サイズなどの詳細がほとんどないデータベースからの動的画像を表示し、ホバー効果の境界線を表示しています。

  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
4

1 に答える 1

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 を使用して境界線を非表示にします。

于 2013-02-02T07:47:47.120 に答える