css hover with checkbox hack

Hey I am trying to make a box whereby when the button is pressed the text is only shown "Reserved" as right now it shows "Free Space!Reserved" as I have used the :after function. Is there anyway to create a hover function as well so that this shows "Click here to reserve" when the box is green and hover "Mine" whilst the box is red?

The code is below http://ift.tt/1UyuGFw

<input type="checkbox" id="btnControl"/>
<label class="mouseover1" for="btnControl">Free Space</label>

.mouseover1 {

background-color: green;
color: white;
display: inline-block;
padding: 5% ;
text-align: center;
width: 20%;
}

#btnControl {
 display: none;
}

.mouseover1:active {
margin-left: 2px;
box-shadow: 0px 0px 1px #000;
outline: 1px solid black;
}

.mouseover1:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
color:black;
}

#btnControl:checked + label:after {
content: 'Reserved!';
}

input[type=checkbox]:checked ~ .mouseover1 {
background-color: red;
}