Aquí está el escenario:

Tienes dos imágenes y se apilan unas sobre otras. La imagen indexada en z de mayor orden es responsable de manejar los eventos de clics (piense en la API de Google Map) y es transparente, mientras que la imagen a continuación es responsable de una representación visual.

Aquí hay una representación pseudo-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>

Ahora, cuando se hace clic en el elemento 'más alto', el evento se envía también en el elemento 'más bajo'.

La idea básica:

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

Esta parte está bien y transfiere el evento en consecuencia,pero no parece invocar la clase psuedo CSS de hover.

¿Alguien ha tenido suerte con hacer algo de esta naturaleza?