Как предотвратить активный элемент?

Question

У меня есть модальное приложение для одной страницы, которое появляется, когда пользователь делает определенное действие. Если пользователь нажимает на одну из кнопок (да/нет), модальный закрывается. Если тот же самый модальный всплывает снова, последняя нажатая кнопка остается активной. Я использую псевдокласс :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> 

В заключении, некоторые андроида (~ 4.2) устройства не любят :active классов псевдо, когда они assingned к div's.