我正在显示来自数据库的图像数据，其中只有几个元素仅在悬停时显示。
但是当我将鼠标悬停并显示隐藏的元素时，以前的元素将离开它们的位置并被晃动一下。
我想预先保留空间，以便在悬停时不会有元素离开。
请帮助或建议其他方法。
<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');
});
});
最佳答案
尝试使用visibility: hidden而不是display: none
关于html - 在数据库<li>元素之间预先保留空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14772695/