如何使图像的位置与其周围的文本无关

我已经得到了图片。当鼠标移过去时 - 图片变大5倍，鼠标离开区域时恢复正常。错误在于，当图片变大时 - 它下面的文字变小，我不希望发生这种情况。我该怎么做？位置：绝对对我来说不好，因为在这种情况下，我的格式在不同的浏览器或屏幕上看起来很糟糕。如何使图像的位置与其周围的文本无关

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

来源

2012-02-23 Serge Vinogradov

我使用常规的img src标记（如果有的话） – 2012-02-23 00:31:23

您能否提供一些示例HTML和CSS？ – mc10 2012-02-23 00:40:03

狮子座在正确的轨道上，但缺少一些东西。您必须“修正”边距，以便在图像展开时向内“增长”。
您需要至少使用position: relative;定位图像，以便z-index得到应用。

这里是工作示例
http://jsfiddle.net/utNa2/

编辑链接/嗯......好像没有必要在这种情况下的z-index。

来源

2012-02-23 01:09:11 leugim

我会使用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"); 
});

这甚至可能看起来不错过

来源

2012-02-23 00:35:24 Leo

是的，这正是我试图做的，它不适合我。 – 2012-02-23 00:46:44

Z指数不起作用 - 文字仍然变低。 – 2012-02-23 00:47:03

尝试position:absolute当图像较大。

来源

2012-02-23 00:54:53 Dips

如何使图像的位置与其周围的文本无关

回答

相关问题