CSS 帮助？悬停时的图像答案

【问题标题】：Css help? Images on hoverCSS 帮助？悬停时的图像
【发布时间】：2013-05-21 10:43:06
【问题描述】：

嘿，伙计们，我需要一些 CSS 方面的帮助，当我将鼠标悬停在它们上面时，我有一些图像会展开，但它会将所有内容同时推开

        <style>
    .box
{
   width: 750px;
   height: 1000px;
   border:1px solid green;


}
.enlarge-onhover {
     width: 125px;
     height: 125px;
}

.enlarge-onhover:hover {
     width: 225px;
     height: 225px;
}
</style>

我不希望它这样做，我希望它只是重叠其余图像并通过左键单击而不是悬停展开

【问题讨论】：

尝试使用float 标签？如float:right。在我看来，您应该为此使用 JQuery。
将其更改为单击操作需要 javascript，或者您可以使用活动伪类，但我建议使用 jquery 以方便和控制

标签： css click hover overlap onhover

【解决方案1】：

一种方法是使用Absolute positioning。

问题是，当您悬停时，您会更改尺寸（宽度和高度），因此它将移动所有内容并重新渲染页面。

【讨论】：

【解决方案2】：

如果您希望它发生，您可以使用 javascript（jquery 为您执行此操作）onclick。

您必须在图像上加上position: absolute;，以免干扰其他元素。

$(".enlarge-onhover").click(function() {

      $(this).css({width: 255, height: 255});
});

如果您只想让它在悬停时发生，那么只需将 position: absolute; 添加到图像的 css 中即可。

如果您不使用 jquery 而只是使用纯 javascript，您可以通过这样做来实现相同的目的；

var img = document.getElementById("myImg");

img.addEventListener("click", function() {

    img.style.width = "255px";
    img.style.height = "225px";
}, false);

以上内容当然假设您的图片的 id 为 myImg。

【讨论】：

【解决方案3】：

除了沿 X 和 Y 轴定位图像外，您还可以设置 Z 轴以使元素一个在另一个之上。

我认为解决方案是增加悬停时元素的 z-index 作为
z 指数：50；

一旦用户悬停，您需要将 z-index 重置为 0

这与将悬停/放大图像的位置设置为看起来像缩略图正在放大时相结合，将为您解决问题。

您可以在此处阅读有关 z-index 的更多信息：
http://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：

这仍然会将其他元素推开！
即使结合了绝对位置？