Можно отслеживать наведение над прозрачным div без div, затрагивающего любые элементы, которые он охватывает?

Question

Я хочу разместить 100px х 100px прозрачный DIV на странице

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

Я не хочу, чтобы это прозрачный ДИВ затрагивать любые элементы на странице это может «закрывать», т. е. предотвращать любые события наведения/клика, которые могут быть привязаны к этим элементам (я не могу понять, какие события могут быть связаны с этими элементами, если они есть).

Можно ли использовать javascript/jQuery?

Answer 1

Итак, вы хотите, чтобы элементы под div не запускали какие-либо из их событий зависания, но вы хотите отслеживать мышь над прозрачным div? Как вы хотите отследить его? Похоже, вы могли бы просто сделать это с помощью CSS (z-index). Возможно, в документации jquery тоже есть события. CSS ниже, может быть

#myDiv 
{ 
    Z-index:1000; 
} 

#myDiv:hover 
{ 
    Background-color:red; 
} 

#underDiv 
{ 
    Z-index:1; 
} 

Answer 2

В зависимости от уровня поддержки браузера вы требуете, вы могли бы рассмотреть свойство CSS pointer-events (documentation, отметим поддержку только в IE 11):

.transparent-div { 
    pointer-events: none; 
} 

Answer 3

В браузерах, которые поддерживают/реализовать CSS pointer-events, вы можете установить для этого свойства значение none, чтобы позволить поведению указателя, по сути, «передать» элемент. Например:

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 
<img src="http://placekitten.com/300/300" /> 

С CSS:

ul { 
    width: 300px; 
    height: 300px; 
    margin: 0; 
    padding: 0; 
} 

li { 
    margin: 0; 
    padding: 0; 
    height: 100px; 
} 

li:nth-child(odd) { 
    background-color: #ccc; 
} 

img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.3; 
    pointer-events: none; 
} 

и JQuery:

$('li').click(function(){ 
    console.log(this.textContent); 
}); 

JS Fiddle demo (протестированы только в Chrome 31/Win XP).

События щелчка стреляют по элементам li под абсолютно позиционируемым изображением.

С той же HTML и CSS, следующий JQuery позволяет также метод hover() для использования:

$('li').hover(function(){ 
    console.log(this.textContent); 
}); 

JS Fiddle demo

Ссылки:

• pointer-events compatibility (caniuse.com).
• pointer-events (MDN).
• pointer-events (W3C).