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

您必须在'：hover'之前放置'&'。固定代码：

.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/