changing background of a field on hover (HTML, CSS)

I have been struggling with this for a few days and cannot work out the answer: I am trying to simply change the background of a box when on hover. I have managed to do this for the text but the rest of the box does not change.

The link to the problem can be seen here

Here is the current code I have: HTML

<html lang="en">
  <head>

    <link rel="stylesheet" type="text/css" href="spanish.css"
    media="all and (min-width: 1300px)"  />

    <div class="pricebox1">
      <a href="">Conversational Spanish</a>
    </div>

  </body>
</html>

CSS

.pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1 :hover {
  background: #ffffff;
  color: red;

What am I doing wrong?

Solution

This? In the .pricebox1 :hover {} is not background but background-color

    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
  color: red;
}

<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>

And if you want to change the color of the text at the same time, simply do:

.pricebox1 > a:hover{
  color: red;
}

    .pricebox1 {
  background-color: lightgrey;
  width: 300px;
  padding: 5px;
  margin: 25px 0 0 400px;
  text-align: center;
  font-size: 1.5em;

}

.pricebox1:hover {
  background-color: white;
}

.pricebox1 > a:hover{
  color: red;
}

<div class="pricebox1">
    <a href="">Conversational Spanish</a>
    </div>