Opera pass нажмите на кнопку с перекрытием - PullRequest
Новая
       28

Opera pass нажмите на кнопку с перекрытием

1 голос
/ 10 апреля 2011 
<div style="width: 100px; height: 25px; position: relative;">
    <input type="button" style="width: 100px; height: 25px;" onclick="alert(1);" value="Input"/>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3;"></div>
</div>
<br/>
<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Button</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3;"></div>
</div>

Когда я нажимаю на первую кнопку () в Opera 11.01, кнопка не нажимается, потому что следующая

перекрывается . Но если я нажимаю на вторую кнопку ( Пример для jsFiddle

Обновлено: Поведение:

  • Нажмите на первую кнопку в Chrome. Это не кликабельно, предупреждение не появляется. Корректное ;
  • Нажмите вторую кнопку в Chrome. Это не кликабельно, предупреждение не появляется. 1020 * Правильный *;
  • Нажмите на первую кнопку в Opera. Это не кликабельно, предупреждение не появляется. Корректное ;
  • Нажмите вторую кнопку в Opera. Кнопка визуально нажата (!!) - стиль кнопки изменен на состояние «нажата», предупреждение не появляется. Неверно - Кнопка не должна нажиматься, потому что она заблокирована div. Поведение должно совпадать с первой кнопкой;

1 Ответ

0 голосов
/ 10 апреля 2011

Попробуйте добавить z-index в div 

<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Inpute</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3; z-indeX: -1;"></div>
</div>
<br/>
<div style="width: 100px; height: 25px; position: relative;">
    <button style="width: 100px; height: 25px;" onclick="alert(1);">Button</button>
    <div style="top: 0px; left: 0px; bottom: 0px; right: 0px; position: absolute; background-color: #000000; opacity: 0.3; z-index: -1;"></div>
</div>

Обновлено: JsFiddle

...