CSS maze game - :hover inaccurate - html

Question

I'm trying to make a maze using only CSS. First I'm designing shapes and then I'm giving them a :hover attribute, so that when the player fails and hits a "wall" with the cursor, the corresponding shape expands and blocks the entire screen. Here's what I have so far:
.square1 {
width: 1092px;
height: 320px;
background: red;
position: absolute;
top: 50%;
left: 20%;
}
.square2{
width: 200px;
height: 300px;
background: red;
position: absolute;
top: 0%;
left: 20%;
}
.triangel1{
width: 0;
height: 0;
border-top: 300px solid red;
border-right: 300px solid transparent;
position: absolute;
top: 0%;
left: 34.6%;
}
.triangel2{
width: 0;
height: 0;
border-bottom: 250px solid red;
border-left: 250px solid transparent;
position: absolute;
top: 30%;
left: 27%;
}
.square3{
width: 400px;
height: 280px;
background: red;
position: absolute;
top: 0%;
left: 47%;
}
.square4{
width: 327px;
height: 400px;
background: red;
position: absolute;
top: 0%;
left: 76%;
}
.square1:hover{
width: 1092px;
height: 642px;
position: absolute;
top: 0%;
left: 20%;
background: red;
}
.triangel1:hover{
width: 680px;
height: 340px;
position: absolute;
top: 0%;
left: 20%;
background: red;
}
.triangel2:hover{
width: 500px;
height: 340px;
position: absolute;
top: 0%;
left: 20%;
background: green;
}
body
{
background-color: rgba(0,0,0,0.8);
}
Where the shapes (square1, square2 etc...) are named as <div class="square1"></div> in a different file. The only problem is that the :hover is innacurate. My shapes sometimes expand when I hover 5 pixels away from them and doesn't expand when I'm right on top of them. Why is this and how can I prevent it?
PS: I only want to use CSS, HTML and possibly PHP.