Why "empty-div" don't change background-color?

Question

div.empty-div {
position: relative;
background-color:blue;
height: 100px;
width: 100px;
margin: 30px;
padding: 10px;
border: 1px solid black;
}
div.green-div {
position: absolute;
background-color: #8bc34a;
border: 1px solid white;
width:100%;
height:100%;
top:-1px;
left:-1px;
}
div.green-div:hover{
transform: rotate(25deg);
transform-origin: 0% 100%;
-webkit-transform: rotate(25deg);
-webkit-transform-origin: 0% 100%;
transition:transform 3s ease-in-out;
}

<div class="empty-div">
<div class="green-div"></div>
</div>

Answer 1

It's changed to blue, but you can't see it, because the green-div is on top of the empty-div.

Answer 2

Use higher z-index for the green div.

Answer 3

It's alive) Thanks.

Answer 4

How can i solve it?