Вот сценарий:

У вас есть два изображения, и они сложены друг на друга. Изображение z-indexed высшего порядка отвечает за обработку событий кликов (например, Google Map API) и является прозрачным, а изображение ниже отвечает за визуальное представление.

Вот псевдо-HTML / CSS представление:

div.visual-container {
    width: 10px;
    height: 10px;
}

div.visual-container:hover {
    background-color: #555;
}

div.click-container {
    width: 10px;
    height: 10px;
}

<div class='lowest'>
    <div class='visual-container'></div>
</div>

<div class='highest'>
    <div class='click-container'></div>
</div>

Теперь, когда щелкает «самый высокий» элемент, событие отправляется также на «самый низкий» элемент.

Основная мысль:

function onHoverEventForHighest() {
    createMouseEvent(lowest_element, 'mouseover', event);
};

Эта часть в порядке и передает событие соответственно,но он не вызывает CSS-класс: hover.

Кому-нибудь повезло с чем-то подобным?