HTML按钮上的背景悬停更改

Question

CSS悬停只更改文本的背景，而不是整个按钮的背景。有没有办法改变悬停时按钮的整个背景？我试着为按钮制作一个容器，并更改那里的背景，但背景显示为矩形，而我的按钮是圆形的。

<a href="google.ca">
   <button class="main-button">
      <span>CONTACT ME</span>
   </button> 
</a>

.main-button{
  border-radius:50px;
  border:3px solid $Green;
  overflow:hidden;
  color:$Green;
  background:transparent;
  width:20%;
  height:8%;
  :hover{
    transition: all 0.5s ease-in-out;
    background:$Dark;
  }
  span{
    font-weight:bold;
    font-size:120%;
    font-family: 'Montserrat', sans-serif;
  }
}

Answer 1

你必须放一个'&'在"：悬停"之前。修复了您的代码：

.main-button{
 border-radius:50px;
 border:3px solid $Green;
 overflow:hidden;
 color:$Green;
 background:transparent;
 width:20%;
 height:8%;
 &:hover{  /* <-- HERE WAS THE MISTAKE */
  transition: all 0.5s ease-in-out;
  background:$Dark;
 }
 span{
  font-weight:bold;
  font-size:120%;
  font-family: 'Montserrat', sans-serif;
 }
}

http://jsfiddle.net/jnzn22yb/