Firefox: щелчок по псевдоэлементу CSS не вызывает событие щелчка

Вот моя кнопка:

<button class="btn-close">Close alert</button>

... со следующим CSS:

.btn-close{
    position: relative;
    height: 30px;
    border: none;
    background-color: #332b2a;
    color: #fff;
    outline: none;
    cursor: pointer;
}

.btn-close:after {
    content: " ";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    right: -32px;
    top: 0;
    background-color: #332b2a;
}

... и следующий (пример) jquery:

$(document).ready(function(){
    $(document).on('click', '.btn-close', function(){
        alert("It works!");
    });
});

Однако, когда я пытаюсь щелкнуть элемент after, он не вызывает событие click. Кто-нибудь знает, есть ли какое-нибудь решение? Я действительно не хочу использовать пустой диапазон внутри кнопки.

Он работает в Chrome, Opera и Safari. Моя версия Firefox 27.0.1.

Я сделал пример jsFiddle, если вы хотите попробовать сами: http://jsfiddle.net/esRBa/1/

Спасибо за вашу помощь!


jquery css firefox onclick pseudo-element
person lefoy    schedule 18.02.2014    source источник
comment
обратите внимание, что если вы замените тег button на div, это сработает. Но до сих пор не могу понять, что style позволяет это   -  person Luccas    schedule 18.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что самым простым решением было бы расширить padding, чтобы покрыть псевдоэлемент.

.btn-close{
    padding: 0 32px 0 0;
}

.btn-close:after {
    right: 0;
}
person pstenstrm    schedule 18.02.2014
comment
Это может быть хорошей альтернативой, я обновил jsfiddle этим решением, и, похоже, оно работает. jsfiddle.net/esRBa/2 - person lefoy; 18.02.2014