title: CSS button hover/link only when you hover on the top of it
body: <p><a href="http://justxp.plutohost.net/gxx/" rel="nofollow">http://justxp.plutohost.net/gxx/</a></p>
  
  <p>Try hovering the buttons.</p>
  
  <p>The hover / link will only work if you hover on the head of the buttons.
  Why is this happening?</p>
  
  <p>This is the code:</p>
  
  <pre><code>    &lt;a href="#"&gt;
          &lt;div class="button-1"&gt;
              &lt;span class="bebas"&gt;play&lt;/span&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
          &lt;div class="button-1"&gt;
              &lt;span class="bebas"&gt;community&lt;/span&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
          &lt;div class="button-1"&gt;
              &lt;span class="bebas"&gt;account help&lt;/span&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>   .button-1 {
     background-image: url("../img/buttonoff.png");
     background-repeat: no-repeat;
  width: 302px;
  height: 82px;
  margin-left: 1.4%;
  margin-top: 1%;
  float: left;
  text-align: center;
  line-height: 90px;
  -webkit-transition: all 200ms ease-in-out;
          -moz-transition: all 200ms ease-in-out;
          -ms-transition: all 200ms ease-in-out;
          -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
  }
  .button-1:hover {
  background-image: url("../img/buttonon.png");
  background-repeat: no-repeat;
  width: 302px;
  height: 82px;
  -webkit-transition: all 200ms ease-in-out;
          -moz-transition: all 200ms ease-in-out;
          -ms-transition: all 200ms ease-in-out;
          -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
  }
  </code></pre>
  
  <p>I see nothing wrong with that?
  I tried making the height bigger, still doesn't work.</p>
  
  <p>I'm very curious about this!</p>