Trigger css modifica dello stato del passaggio del mouse dopo la transizione: javascript, html, css

Ho un'interfaccia utente con eventi javascript checausare modifiche CSS che riposizionano gli elementi nell'interfaccia utente. Sto riscontrando un problema con gli stati hover, in cui lo stato hover non si aggiorna correttamente dopo queste modifiche. Ho riassunto qui un esempio molto semplice.

1. passa il mouse sul "blocco 1" Osservare: "blocco uno" diventa blu
2. fare clic su "blocco 1" Osservare: le modifiche a CSS provocano il ribaltamento dei blocchi
3. Osserva: il mouse è ora sospeso sul "blocco 2" ma il "blocco 1" è ancora blu
4. Comportamento previsto: "blocco 2" dovrebbe essere blu dopo la trasformazione e "blocco 1" dovrebbe essere rosso.
5. Nota: spostando leggermente il mouse si "corregge"

$(function() {
$(".block").click(function () {
$(".container").toggleClass("flipped");
});
});

.container {
display: flex;
width: 150px;
}

.container.flipped {
transform: rotate(180deg);
}

.block {
height: 50px;
width: 50px;
background-color: red;
margin: 10px;
}

.block:hover {
background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block">
block 1
</div>
<div class="block">
block 2
</div>
</div>

C'è un modo per garantire che lo stato del passaggio del mouse venga aggiornato correttamente dopo l'applicazione delle classi e le modifiche apportate?

risposte:

Questa soluzione è un po 'un trucco. Non funziona perfettamente, ma fa il suo lavoro.

$(function() {
$(".block").click(function () {
$(".container").hide();
$(".container").toggleClass("flipped");
$(".container").show(0);
});
});

Nascondere il contenitore, capovolgerlo e mostrarlo di nuovo forza il ridisegno di quella parte della pagina, che sembra attivare il :hover nuovamente il selettore.

Nota: passaggio 0 per la durata da show() sembra essere necessario affinché funzioni.

Ecco una demo:

Link CodePen