<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
.blocks {
width: 100%;
display: flex;
justify-content: space-around;
}
.block {
background-color: blue;
width: 200px;
height: 200px;
transition: 0.4s;
}
.block_red {
background-color: red;
}
.block_blured {
background-color: green;
}
$(".block").mouseenter(function() {
$(".block").removeClass("block_red")
$(".block").addClass("block_blured")
$(this).removeClass("block_blured")
$(this).addClass("block_red")
})
This Pen doesn't use any external CSS resources.