Changing a box colour and text colour on hover?

Question

I have the following code which is for a styled subscribe button and I've been trying to get it so that on hover the background colour of the whole box changes and also the colour of the text 'Subscribe' to change colour as well. At the moment the code I have below changes the background colour but only changes the colour of the text if i hover directly on it. I want to be able to hover anywhere on the box and the two elements change colour together... Any one able to point out where I'm going wrong?

HTML:

<h3 class="subscribeHeader">
   <a href="http://link.com/" target="_blank">Subscribe</a>
</h3>

CSS:

h3.subscribeHeader {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
}

h3.subscribeHeader a:hover {
  color: #fafaf9;
}

h3.subscribeHeader:hover {
  background-color: #373737;
}

Answer 1

CSS can be over ridden.

js fiddle

h3.subscribeHeader {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
}

h3.subscribeHeader a:hover {
  color: #fafaf9;
}

h3.subscribeHeader:hover {
  background-color: #373737;
}

h3.subscribeHeader:hover a{
  color: #fafaf9;
}