如何防止元素保持活动状态

How to prevent element from staying active?

本文关键字：活动状态 元素 何防止      更新时间：2023-09-26

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

这发生在一些安卓触摸设备上。

.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 仍然处于活动状态。如果我按"是"并第三次返回，则它们都处于活动状态。

我设法通过将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） 设备不喜欢:active伪类，因为它们被断言要div's。

相关文章：