0

ホバリング時にのみ表示する要素がほとんどないデータベースからの画像データを表示しています。

しかし、マウスをホバーして非表示の要素を表示すると、前の要素がその場所を離れて少し揺れます。

ホバリング時に要素が場所を離れないように、スペースを事前に予約したいと思います。

Plzは助けたり、代替アプローチを提案したりします.

 <span class="w_li" style="margin-left: 10px;">
  <u1 id='o4_img_w<?php echo $picid;  ?>' style="display: inline-block;border: solid transparent 2px;margin-top: 20px">
      <u1 style="text-align:center;position: relative;margin-top: 8px;background: white ">
          <li style="">
              <span id='o4_img_c<?php echo $picid;   ?>' style="display: none;border: solid black 1px"><a>like</a>.<a>Coment</a>.<a>fvrt</a></span>
          </li>
      </u1>
      <u1>
          <li>
               <span style="display: none" id='o4_img_p<?php echo $picid;  ?>'>
                    <span style="display: inline-block;">
                   <?php
                        $sql2=mysqli_query($this->db->connection,"SELECT  * from photo where  pro_name='$pro_name'");
                        while($row2=mysqli_fetch_array($sql2)){
                            $img_name=$row2['f_name'];
                            $pro_col1=$row2['pro_col'];
                            echo "<div ><input type='image' href='#sales_pics' class='ok_p'  src='images/sales/$img_name' style='width: 20px;height: 20px;margin-bottom: 3px;margin-left: 3px' /></div>";
                        }
                        ?>
                    </span>
              </span>
             <span style="margin-left: 5px;padding-right: 5px"><a href='#wall<?php echo $o4_id;   ?><?php echo $picname;   ?>' class="ok" title="<?php echo $pro_name;   ?>" rel="<?php echo $o4_id;   ?>" onclick="popup()"><img src='images/sales/<?php echo $picname;  ?>' style='width: 140px;height: 170px;border-radius: 10px'></a></span>

          </li>
      </u1>
  </u1>


                $(document).ready(function () {


                $("#o4_img_w<?php echo $picid;    ?>").hover(function () {
                    $("#o4_img_c<?php echo $picid;    ?>").show();
                    $("#o4_img_p<?php echo $picid;    ?>").show();

                    $(this).css({

                        'border':'solid grey 2px'


                    });


                }, function () {
                    $("#o4_img_c<?php echo $picid;    ?>").hide();
                    $("#o4_img_p<?php echo $picid;    ?>").hide();

                    $(this).css({

                        'border':'solid transparent 2px'

                    });
                    $('#o4_hover_bar<?php echo $o4_id;    ?>').hide('fast');

                });


            });
4

2 に答える 2

1

visibility: hiddenの代わりに使用してみてくださいdisplay: none

于 2013-02-08T12:39:05.420 に答える
1

jQueryshow()を使用して、 CSS プロパティをhide()切り替えます。display: none;

画像用のスペースを確保するには、代わりにvisibility: hiddenandを使用しvisibility: visible;ます。

$(document).ready(function () {
  $("#o4_img_w<?php echo $picid;    ?>").hover(function () {
    $("#o4_img_c<?php echo $picid;    ?>").css( 'visibility', 'visible' );
    $("#o4_img_p<?php echo $picid;    ?>").css( 'visibility', 'visible' );

    $(this).css({'border':'solid grey 2px' });
  }, function () {
    $("#o4_img_c<?php echo $picid;    ?>").css( 'visibility', 'hidden' );
    $("#o4_img_p<?php echo $picid;    ?>").css( 'visibility', 'hidden' );

    $(this).css({'border':'solid transparent 2px' });
    $('#o4_hover_bar<?php echo $o4_id;    ?>').css( 'visibility', 'hidden' );

  });
});
于 2013-02-08T12:39:13.540 に答える