1

どういうわけか（CSSまたはJSを使用して）中央にない要素を作成しようとしていますが、同時にすべての端に到達するページ全体に拡張されます。

div は空になり (背景などがあるだけで、実際には div である必要はなく、ボックスのように見える他の要素である可能性があります)、CSS3 または HTML5 を使用できます。私はjQueryを使用していませんが、誰かがそれを使用してこの問題を解決する方法を見つけたとしても問題ありません.

現時点で私の最善の試みはこれです：http://jsfiddle.net/ApKEu/

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>

しかし、ボックスは同時にすべての端に到達しません:(

私の英語で申し訳ありませんが、助けてくれてありがとう！

4

3 に答える 3

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();
    });
});
于 2013-03-13T18:49:17.590 に答える
0

ご希望の内容がよくわかりませんが、アドバイスできる点がいくつかあります。

  1. ボックスを画面の端まで拡張するには<html>、の幅と高さを指定する必要があります。<body>

    本文、html { 幅:100%; 高さ: 100%; }

  2. 画面の端まで拡大するために、2 倍に拡大することはできません。画面の端よりも大きくなります。

    .box:hover { -webkit-transition: すべて 3000ms; 左: 10%; トップ10％; 高さ: 80%; 幅: 80%; }

ここであなたの例で私がだましたものを見てください

于 2013-03-13T18:56:28.167 に答える
0

ホバーボックスでこれを試すとどうなりますか：

.box:hover {
    height: 100%;
    width: 100%;
    position:fixed;
    top:0;
    left:0
}
于 2013-03-13T18:58:34.143 に答える