Javascript/JQuery樣式 - #button：點擊全屏後懸停保持活動

Question

我知道Javascript的全屏功能還是比較新的，所以我不確定這是一個還沒有解決的bug ，如果問題有簡單的解決方案，或者我犯了一個愚蠢的錯誤...

我在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"); 
    } 
} 

Answer 1

試試這個：

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"); 
    } 
}