0

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

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

我想预先保留空间，以便在悬停时，没有元素会离开。

请帮助或建议任何替代方法。

 <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()并hide()切换display: none;CSS 属性。

为了保留图像的空间，请使用visibility: hiddenandvisibility: 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 回答