Question

我试图以某种方式（使用CSS或JS）将非居中的元素扩展到整个页面，同时到达所有边缘。

div将为空（只有背景或类似的东西，实际上不是必须成为div，可以是任何其他可以看起来像盒子的元素）并且可以使用CSS3或HTML5。我没有使用jQuery，但如果有人找到使用它解决这个问题的方法，没问题。

CSS：

.box {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
    position: absolute;
    top: 100px;
    left: 20px;
}

.box:hover {
    -webkit-transition: all 3000ms;
    -webkit-transform: scale(2);
    height: 90%;
    width: 90%;
}

然后只需在HTML中创建div：

<div class="box"></div>

但是盒子不能同时到达所有边缘:(

对不起我的英文，谢谢你的帮助！

Answer 1

使用jQuery：http://jsfiddle.net/jTFwB/

$(".box").bind("mouseover", function() {
    var n = $(this).clone();
    var of = $(this).position();
    n.css({
        position:'absolute', 
        top: of.top, 
        left: of.left, 
        margin: 0
    }).appendTo("body")
    .animate({
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        position: 'relative'
    });

    n.bind("mouseout", function() {
        $(this).stop(true).remove();
    });
});

Answer 2

我不清楚你想要什么，但我可以提出几点建议。

您需要指定<html>，<body>的宽度和高度，以将您的框展开到屏幕边缘。

body，html { 宽度：100％; 身高：100％; }
要扩展到屏幕边缘，您无法缩放倍数。它会比屏幕边缘大。

.box：hover { -webkit-transition：全部3000毫秒; 左：10％; 前10名％; 身高：80％; 宽度：80％; }

看看我在你的例子here

Answer 3

如果为悬停的盒子尝试这个怎么办：

.box:hover {
    height: 100%;
    width: 100%;
    position:fixed;
    top:0;
    left:0
}

Div扩展到达所有边缘

3 个答案: