title: Hover with checkbox hack
body: <p>I'm trying to make a box whereby when the button is pressed the text is only shown "Reserved" as of right now it shows "Free Space!Reserved" as I have used the :after function. Is there any way to create a hover function so that it shows "Click here to reserve" when the box is green and hover "Mine" whilst the box is red?</p>
  
  <p>The code is on <a href="https://jsfiddle.net/nayshal/s15dd8tu/1/" rel="nofollow">jsFiddle</a> and below:</p>
  
  <pre><code>&lt;input type="checkbox" id="btnControl"/&gt;
  &lt;label class="mouseover1" for="btnControl"&gt;Free Space&lt;/label&gt;
  
  .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;
  }
  </code></pre>