Aqui está o cenário:

Você tem duas imagens e elas estão empilhadas umas nas outras. A imagem indexada com z de maior ordem é responsável por manipular os eventos de clique (pense na API de mapas do Google) e é transparente, enquanto a imagem abaixo é responsável por uma representação visual.

Aqui está uma representação 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>

Agora, quando o elemento 'mais alto' é clicado, o evento é despachado também no elemento 'mais baixo'.

A ideia básica:

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

Esta parte está bem e transfere o evento de acordomas não parece invocar o: hover CSS psuedo-class.

Alguém teve alguma sorte em fazer algo dessa natureza?