Стиль CSS и стили непрозрачности, мешающие событиям наведения и щелчка

Question

Недавно я играл с обычным модальным моментом, и у меня возникли трудности с его увольнением.

В основном существует якорная бирка с абсолютным положением, расположенным на div с относительным положением. Стили наложения Css не применялись к нему, когда мышь была явно выше якоря, и событие клика не запускалось.

Примеры:

Defective Dismiss Anchor

Working Dismiss Anchor

Разница между этими двумя примерами находится в CSS

В дефектного случае следующие стили присутствуют

.modalDialog 
{ 
    /* ... */ 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 
.modalDialog:target 
{ 
    opacity: 1; 
    pointer-events: auto; 
} 

В рабочих примерах все эти стили были удалены, но все остальное остается неизменным.

Мои оригинальные предположения о том, что z-индекс является виновником, оказались неверными, также я сомневаюсь, что фиксированные и относительные позиции виноваты (неподтвержденные), похоже, что непрозрачность виновата.

Я понимаю, почему удаленные стили не нужны, но я не понимаю, почему они мешали навести курсор и нажимали на события от стрельбы?

Объяснение будет оценено.

Answer 1

Это проблема pointer-events: none.

Это свойство контролирует, как элементы реагируют на события мыши, в этом случае наведите указатель мыши и нажмите.

Похоже, что он был переопределен в селекторе :target, но в этом случае это не сработает, потому что .modalDialog:target означает «когда URL-адрес #modalDialog». Но, что .modalDialog не имеет идентификатора, поэтому он не может быть целью в любом случае.

От CSS трюков:

The: целевой селектор псевдо в CSS соответствует, когда хэш в URL и идентификатор элемента являются одинаковыми.

Это обновление скрипта только с правилами CSS-указателей-указателей, и оно работает.

http://jsfiddle.net/zPgj8/11/