如何防止元素保持活跃？

Question

我在单页应用程序上有一个模式，当用户执行特定操作时弹出。如果用户按下其中一个按钮（yes/no），模式将关闭。如果再次弹出相同的模式，最后按下的按钮将保持活动状态。我使用伪类 :active 在按下时更改按钮背景。

这发生在某些 android 触控设备上。

HTML：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p class="modal-title" data-bind="lang: Title"></p>
            </div>
            <div class="modal-body" data-bind="lang: Body">
            </div>
            <div class="modal-footer">
                <div class="exitFooterButtons">
                    <div class="ExitButton">
                        <div data-event="yes" data-bind="lang: 'Modal.Yes'"></div>
                    </div>
                    <div class="ExitButton" data-event="no" data-bind="lang: 'Modal.No'"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

modal .modal-content .modal-footer .ExitButton {
    line-height: 54px;
    width: 50%;
    display: table-cell;
    border-top: 1px solid black;
    cursor: pointer;
    font-size: 18px;
    height: 54px;
    border: 0;
    margin: 0;
    float: left;
    color: #c6c6c6;
    border-radius: 0;
    background: url(../Images/headerRowBackground.png) repeat-x; 
}

和：活动

modal .modal-content .modal-footer .ExitButton:active {
    background: url(../Images/reverseHeaderRowBackground.png) repeat-x;
}

如果我第一次按NO，然后第二次回到模态，那么NO仍然有效。如果我然后按 YES 并第三次再次返回，则它们都处于活动状态。

Answer 1

我设法通过将 div 替换为 buttons

来解决此问题

        <div class="exitFooterButtons">
            <div class="ExitButton">
                <button data-event="yes" data-bind="lang: Languages.Yes"></button>
                <button data-event="no" data-bind="lang: Languages.No"></button>
            </div>
        </div>

总之，某些 android(~4.2) 设备在分配给 div's.

时不喜欢 :active 伪类

如何防止元素保持活跃？

How to prevent element from staying active?

html

javascript

css

android

single-page-application