Wywoływanie: hover pseudo-class poprzez przeniesienie zdarzeń za pomocą JavaScript

Oto scenariusz:

Masz dwa obrazy i są one ułożone jeden na drugim. Obraz najwyższego rzędu zindeksowany jest odpowiedzialny za obsługę zdarzeń kliknięć (pomyśl o Google API Map) i jest przezroczysty, a poniższy obraz odpowiada za wizualną reprezentację.

Oto reprezentacja 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>

Teraz, gdy kliknięty zostanie element „najwyższy”, zdarzenie jest wywoływane również na elemencie „najniższym”.

Podstawowa idea:

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

Ta część jest w porządku i odpowiednio przenosi zdarzenie,ale to nie wydaje się wywoływać klasy: hover CSS psuedo.

Czy ktoś miał szczęście z robieniem czegoś takiego?

questionAnswers(2)

yourAnswerToTheQuestion