0

嘿，伙计们，我需要一些 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>

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

4

3 回答 3

0

如果您希望它发生，您可以使用 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.

于 2013-05-21T10:46:31.073 回答
0

一种方法是使用绝对定位。

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

于 2013-05-21T10:45:00.077 回答
-1

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

我认为解决方案是将悬停时元素的z-index
增加为 z-index: 50;

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

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

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

于 2013-05-21T10:50:54.583 回答