Можно ли сделать элемент (div) прозрачным для событий мыши?

Question

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

Answer 1

Используйте свойство pointer-events CSS:

myElement { 
    pointer-events: none; 
} 

Do банкнота браузер Compatibil : http://caniuse.com/#feat=pointer-events

Answer 2

Да. Установите pointer-events:none; на элемент выше.

Вот простой пример: Когда я нажимаю на изображение открывается выберите элемент:

div { 
 
    width: 14px; 
 
    height: 14px; 
 
    position:relative; 
 
    top: -18px; 
 
    left: 58px; 
 
    pointer-events: none; 
 
    background: url(http://lorempixel.com/14/14) no-repeat; 
 
}

<select> 
 
    <option value="value1">Value 1</option> 
 
    <option value="value2" selected>Value 2</option> 
 
</select> 
 
<div></div>

Поддержка браузера хорошо (caniuse): для IE, кроме - где она поддерживается только в IE11

Answer 3

Или если вы хотите сделать это jQuery-Way (потому что логика должна быть вне CSS), вы можете использовать $("#foo").unbind("click");.

Вы можете найти более подробную информацию здесь:

http://api.jquery.com/unbind/