Question

我得到了照片。当鼠标悬停在它上面时 - 图片变大5倍，当鼠标离开该区域时恢复正常。错误是当图片变大时 - 它下面的文字变得更低，我不希望这种情况发生。我怎么做？位置：绝对对我不好，因为在这种情况下，我的格式在不同的浏览器或屏幕中看起来很糟糕。

如果你们中的某些人帮助我找到另一种方式，我将不胜感激。

Answer 1

我会使用jQuery：

$("#ImageId").mouseover(function() {
 $("#ImageId").css("z-index", "2");
 $("#ImageId").animate({height:"500px",width:"500px"}, "fast");
});
$("#ImageId").mouseout(function() {
 $("#ImageId").css("z-index", "1");
 $("#ImageId").animate({height:"200px",width:"200px"}, "fast");
});

这甚至可能看起来不错

Answer 2

当图片较大时尝试position:absolute。

Answer 3

Leo走在正确的轨道上，但缺少了一些东西。你必须＆＃34;纠正＆＃34;边缘使他们成长＆＃34;图像扩大时向内您需要至少使用position: relative;定位图片，以便z-index得到应用。

以下是工作示例的链接
http://jsfiddle.net/utNa2/

编辑/嗯...在这种情况下似乎不需要z-index。

如何使图像位置独立于其周围的文本

3 个答案: