Question

我正在显示数据库中的图像数据，只有少数元素只能在悬停时显示。

但是当我悬停鼠标并显示隐藏的元素时，之前的元素会离开它们的位置并稍微震动。

我想预先保留空间，这样在悬停时，不会有任何元素留下。

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');

                });


            });

Answer 1

尝试使用visibility: hidden代替display: none

Answer 2

jQuery show()和hide()切换display: none; CSS属性。

要保留图片的空间，请改为使用visibility: hidden和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' );

  });
});

预留数据库之间的空间＆lt;李＆GT;元素？

2 个答案: