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 回答