0

Javascript の全画面表示機能がまだ比較的新しいことはわかっているので、これがまだ解決されていないバグなのか、問題に対する簡単な解決策があるのか​​ 、それとも単純な間違いを犯しただけなのかはわかりません.. .

div内に入力ボタンがあります。入力ボタンをクリックすると、div がフルスクリーンになります。この入力ボタンには、CSS の背景画像と、同じ背景画像を使用するホバー状態がありますが、背景の位置が変更されます (複数の画像が不要になるため)。ボタンをもう一度クリックすると、div は全画面表示を終了します。

問題は、div が全画面表示になったときに発生します。クリックするとホバー状態になるボタンは、div がフルスクリーンに変わるとホバー状態のままになります。div は、画面上のボタンをカーソルの下にない場所に再配置します (本来のように) が、何らかの理由で、ボタンはまだホバー状態にある必要があると考えています。カーソルをボタンに戻したり離したりするまで、ボタンは「ホバー解除」され、通常のホバー/ホバー解除動作を再開します。私が必要としているのは、div がフルスクリーンに変更された後、ボタンがホバー状態のままにならないようにすることです。

単純化されたコードの一部を以下に示しますが、RunPrefixMethod 関数は一般的なものであり、この問題を解決する必要はないと思うので省略しました。必要な場合はお知らせください。

ああ、私は最新バージョンの Firefox を使用していますが、他のブラウザーではまだテストしていません。全画面表示機能は最近のブラウザーに限定されており、それをサポートしているブラウザーには問題があることを知っています。ご協力いただきありがとうございます。

HTML :

<div id="fullBox">
    <input type="submit" value="" id="fullbtn" class="btn" onclick="fullscreen();"/>
</div>

CSS :

#fullBox {
    width:900px;
    height:440px;
    position:absolute;
}
#fullbtn {
    width:44px;
    height:31px;
    background: url(btn_full.png) no-repeat top left;
}
.btn:hover {
    background-position: bottom;
}

JavaScript :

function fullscreen() {
    var e = document.getElementById("fullBox");
    if (RunPrefixMethod(document, "FullScreen") || 
        RunPrefixMethod(document, "IsFullScreen")) {
        RunPrefixMethod(document, "CancelFullScreen");
    }
    else {
        RunPrefixMethod(e, "RequestFullScreen");
    }
}
4

1 に答える 1

0

これを試して：

HTML :

<div id="fullBox">
    <input type="submit" value="" onmouseover="this.className='btn hover'" onmouseout="this.className='btn'" id="fullbtn" class="btn" onclick="fullscreen();"/>
</div>

CSS :

#fullBox {
    width:900px;
    height:440px;
    position:absolute;
}
#fullbtn {
    width:44px;
    height:31px;
    background: url(btn_full.png) no-repeat top left;
}
.btn.hover {
    background-position: bottom;
}

JavaScript :

function fullscreen() {
    document.getElementById("fullbtn").className="btn";
    var e = document.getElementById("fullBox");
    if (RunPrefixMethod(document, "FullScreen") || 
        RunPrefixMethod(document, "IsFullScreen")) {
        RunPrefixMethod(document, "CancelFullScreen");
    }
    else {
        RunPrefixMethod(e, "RequestFullScreen");
    }
}
于 2012-07-22T13:41:56.960 に答える