我有一组动态生成的图像(每张图像附近都有评论)。我想显示每个图像的最大宽度和最大高度为 48 像素，但是当用户将鼠标悬停在图像上时，它会增长到最大宽度和最大高度为 200 像素。但不要移动页面上的所有其他内容。这是生成图像的代码:
$(function(){
$.getJSON("inc/API.php",
{command : "getUserComments", userid : getQueryStringValue("userid")},
function(result)
{
for (var i = 0; i<6; i++){
$("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+
result[i].commentDateAndTime+"</div><div id='divUserDetail'><div id='divUserpic'>
**<img src='images/"+result[i].imageFileName+"' class='commentpic' />**</div>
<div id='divUsername'>Comment for <a href='rank.html?imageID="+result[i].imageID+
"&imageFileName="+result[i].imageFileName+"'>"+result[i].imageHeader+
"</a></div></div><div id='divCommentText'>"+result[i].comment+"</div></div>");
}
});
});
我用 2 ** 标记了图片。这是 CSS:
.userpic, .commentpic
{
max-height:48px;
max-width:48px;
border-radius:5px;
z-index:1;
position:relative;
}
.commentpic:hover
{
max-width: 200px;
max-height: 200px;
position:relative;
z-index: 50;
}
它会放大图像，但也会移动图像右侧和图像下方的所有其他内容。
如何在不移动此处其他所有内容的情况下使用 CSS(最好)或 jQuery 使图像变大？谢谢!
最佳答案
您可以尝试将 .commentpic 的位置设置为绝对位置。
您可以在此处查看示例:http://jsfiddle.net/HkPCp/3/
我认为这就是您想要的行为，对吧？
编辑:我更新了 jsFiddle，这样它就不会移动其他元素。
这是正确的行为吗？
关于jquery - 使用 CSS(或 jQuery)放大图像而不移动页面上的其他所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48084044/