As far as I know hovering effects are undone when the we "unhover" it. But in my case I have given "align-content : center" when hover is done but when I "unhover" it, it doesn't undo the effect. Why is that?I have provided the code.
.container { border: 2px solid grey; display: flex; height: 500px; width: 500px; flex-direction: row; justify-content: center; align-content: flex-start; align-items: flex-start; flex-wrap: wrap;}.box:hover { align-content: center;}.box { height: 100px; width: 100px; border: 2px solid black; margin: 15px;}#box1 { background-color: red;}#box2 { background-color: blue;}#box3 { background-color: orange;}#box4 { background-color: aqua;}#box5 { background-color: purple;}<div class="container"><div id="box1" class="box">BOX1</div><div id="box3" class="box">BOX2</div><div id="box2" class="box">BOX3</div><div id="box4" class="box">BOX4</div><div id="box5" class="box">BOX5</div></div>